<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Web Animations</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification defines a model for synchronization and      timing of changes to the presentation of a Web page.      This specification also defines an application programming interface      for interacting with this model and it is expected that further      specifications will define declarative means for exposing these      features." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/web-animations-1/" rel="canonical">
<style>
.informative-bg {
  margin: 1.5em 0 1em;
  padding: 1em;
  margin-top: 1em;
  background: #efe;
  border: green 1px dotted;
}

div.informative-bg *:last-child {
  margin-bottom: 0;
}

div.informative-bg p:first-child {
  margin-top: 0;
}

div.informative-bg h2,
div.informative-bg h3,
div.informative-bg h4 {
  background: none;
}

div.switch > dl {
  padding-left: 2em;
}

div.switch > dl > dt > p {
  display: inline;
}

div.switch > dl > dt:before {
  content: '\21AA';
  padding: 0 0.5em 0 0;
  display: inline-block;
  width: 1em;
  text-align: right;
  line-height: 0.5em;
  margin-left: -1.3em;
}

.attributes::before, .methods::before,
.parameters::before, .exceptions::before,
.constructors::before, .members::before {
  font: bold 100% sans-serif;
  text-align: left;
  margin: 1.33em 0px;
  color: #005A9C;
}

.attributes::before { content: 'Attributes' }
.methods::before { content: 'Methods' }
.parameters::before { content: 'Parameters' }
.exceptions::before { content: 'Exceptions' }
.constructors::before { content: 'Constructors' }
.members::before { content: 'Dictionary members' }

.param,
.exceptionname,
.estype,
.esvalue {
  font-weight: bold;
}

.formula {
  display: block;
  margin: .5em 2em;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Web Animations</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/web-animations-1/">https://drafts.csswg.org/web-animations-1/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/WD-web-animations-1-20181011/" rel="prev">https://www.w3.org/TR/2018/WD-web-animations-1-20181011/</a>
      <dd><a href="https://www.w3.org/TR/2016/WD-web-animations-1-20160913/" rel="prev">https://www.w3.org/TR/2016/WD-web-animations-1-20160913/</a>
      <dd><a href="https://www.w3.org/TR/2015/WD-web-animations-1-20150707/" rel="prev">https://www.w3.org/TR/2015/WD-web-animations-1-20150707/</a>
      <dd><a href="https://www.w3.org/TR/2014/WD-web-animations-20140605/" rel="prev">https://www.w3.org/TR/2014/WD-web-animations-20140605/</a>
      <dd><a href="https://www.w3.org/TR/2013/WD-web-animations-20130625/" rel="prev">https://www.w3.org/TR/2013/WD-web-animations-20130625/</a>
      <dt>Version History:
      <dd><a href="https://github.com/w3c/csswg-drafts/commits/master/web-animations-1">https://github.com/w3c/csswg-drafts/commits/master/web-animations-1</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="43194"><a class="p-name fn u-email email" href="mailto:bbirtles@mozilla.com">Brian Birtles</a> (<span class="p-org org">Mozilla</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="98451"><a class="p-name fn u-email email" href="mailto:flackr@google.com">Robert Flack</a> (<span class="p-org org">Google Inc</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="96463"><a class="p-name fn u-email email" href="mailto:smcgruer@google.com">Stephen McGruer</a> (<span class="p-org org">Google Inc</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="51377"><a class="p-name fn u-email email" href="mailto:graouts@apple.com">Antoine Quint</a> (<span class="p-org org">Apple Inc</span>)
      <dt class="editor">Former Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shans@google.com">Shane Stephens</a> (<span class="p-org org">Google Inc</span>)
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dstockwell@google.com">Douglas Stockwell</a> (<span class="p-org org">Google Inc</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="31960"><a class="p-name fn u-email email" href="mailto:adanilo@google.com">Alex Danilo</a> (<span class="p-org org">Google Inc</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-email email" href="mailto:jackalmage@gmail.com">Tab Atkins</a> (<span class="p-org org">Google Inc</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/web-animations-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-1">GitHub Issues</a>
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-1">GitHub</a>
      <dt>Participate:
      <dd><a href="https://github.com/w3c/csswg-drafts/tree/master/web-animations-1">Fix the text through GitHub</a>
      <dd>Join the ‘waapi’ channel on the <a href="https://damp-lake-50659.herokuapp.com/">Animation at Work</a> slack
      <dd>IRC: <a href="ircs://irc.w3.org:6667/webanimations">#webanimations</a> on W3C’s IRC
      <dt>Tests:
      <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/web-animations">web-platform-tests web-animations/</a> (<a href="https://github.com/web-platform-tests/wpt/labels/web-animations">ongoing work</a>)
      <dd>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines a model for synchronization and

    timing of changes to the presentation of a Web page.
    This specification also defines an application programming interface
    for interacting with this model and it is expected that further
    specifications will define declarative means for exposing these
    features.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “web-animations-1” in the title,
	preferably like this:
	“[web-animations-1] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#use-cases"><span class="secno">1.1</span> <span class="content">Use cases</span></a>
      <li><a href="#relationship-to-other-specifications"><span class="secno">1.2</span> <span class="content">Relationship to other specifications</span></a>
      <li><a href="#overview-of-this-specification"><span class="secno">1.3</span> <span class="content">Overview of this specification</span></a>
     </ol>
    <li><a href="#spec-conventions"><span class="secno">2</span> <span class="content">Specification conventions</span></a>
    <li><a href="#web-animations-model-overview"><span class="secno">3</span> <span class="content">Web Animations model overview</span></a>
    <li>
     <a href="#timing-model"><span class="secno">4</span> <span class="content">Timing model</span></a>
     <ol class="toc">
      <li>
       <a href="#timing-model-overview"><span class="secno">4.1</span> <span class="content">Timing model overview</span></a>
       <ol class="toc">
        <li><a href="#stateless"><span class="secno">4.1.1</span> <span class="content">Stateless</span></a>
        <li><a href="#hierarchical"><span class="secno">4.1.2</span> <span class="content">Hierarchical</span></a>
       </ol>
      <li><a href="#time-value-section"><span class="secno">4.2</span> <span class="content">Time values</span></a>
      <li>
       <a href="#timelines"><span class="secno">4.3</span> <span class="content">Timelines</span></a>
       <ol class="toc">
        <li><a href="#document-timelines"><span class="secno">4.3.1</span> <span class="content">Document timelines</span></a>
        <li><a href="#the-documents-default-timeline"><span class="secno">4.3.2</span> <span class="content">The default document timeline</span></a>
       </ol>
      <li>
       <a href="#animations"><span class="secno">4.4</span> <span class="content">Animations</span></a>
       <ol class="toc">
        <li><a href="#setting-the-timeline"><span class="secno">4.4.1</span> <span class="content">Setting the timeline of an animation</span></a>
        <li><a href="#responding-to-a-newly-inactive-timeline"><span class="secno">4.4.2</span> <span class="content">Responding to a newly inactive
  timeline</span></a>
        <li><a href="#setting-the-associated-effect"><span class="secno">4.4.3</span> <span class="content">Setting the associated effect of an animation</span></a>
        <li><a href="#the-current-time-of-an-animation"><span class="secno">4.4.4</span> <span class="content">The current time of an animation</span></a>
        <li><a href="#setting-the-current-time-of-an-animation"><span class="secno">4.4.5</span> <span class="content">Setting the current time of an animation</span></a>
        <li><a href="#setting-the-start-time-of-an-animation"><span class="secno">4.4.6</span> <span class="content">Setting the start time of an animation</span></a>
        <li><a href="#waiting-for-the-associated-effect"><span class="secno">4.4.7</span> <span class="content">Waiting for the associated effect</span></a>
        <li><a href="#the-current-ready-promise"><span class="secno">4.4.8</span> <span class="content">The current ready promise</span></a>
        <li><a href="#playing-an-animation-section"><span class="secno">4.4.9</span> <span class="content">Playing an animation</span></a>
        <li><a href="#pausing-an-animation-section"><span class="secno">4.4.10</span> <span class="content">Pausing an animation</span></a>
        <li><a href="#reaching-the-end"><span class="secno">4.4.11</span> <span class="content">Reaching the end</span></a>
        <li><a href="#the-current-finished-promise"><span class="secno">4.4.12</span> <span class="content">The current finished promise</span></a>
        <li><a href="#updating-the-finished-state"><span class="secno">4.4.13</span> <span class="content">Updating the finished state</span></a>
        <li><a href="#finishing-an-animation-section"><span class="secno">4.4.14</span> <span class="content">Finishing an animation</span></a>
        <li><a href="#canceling-an-animation-section"><span class="secno">4.4.15</span> <span class="content">Canceling an animation</span></a>
        <li>
         <a href="#speed-control"><span class="secno">4.4.16</span> <span class="content">Speed control</span></a>
         <ol class="toc">
          <li><a href="#setting-the-playback-rate-of-an-animation"><span class="secno">4.4.16.1</span> <span class="content">Setting the playback rate of an animation</span></a>
          <li><a href="#seamlessly-updating-the-playback-rate-of-an-animation"><span class="secno">4.4.16.2</span> <span class="content">Seamlessly updating the playback rate of an animation</span></a>
         </ol>
        <li><a href="#reversing-an-animation-section"><span class="secno">4.4.17</span> <span class="content">Reversing an animation</span></a>
        <li><a href="#play-states"><span class="secno">4.4.18</span> <span class="content">Play states</span></a>
        <li>
         <a href="#animation-events-section"><span class="secno">4.4.19</span> <span class="content">Animation events</span></a>
         <ol class="toc">
          <li><a href="#sorting-animation-events"><span class="secno">4.4.19.1</span> <span class="content">Sorting animation events</span></a>
          <li><a href="#animation-playback-events-section"><span class="secno">4.4.19.2</span> <span class="content">Animation playback events</span></a>
          <li><a href="#animation-playback-event-types"><span class="secno">4.4.19.3</span> <span class="content">Types of animation playback events</span></a>
         </ol>
       </ol>
      <li>
       <a href="#animation-effects"><span class="secno">4.5</span> <span class="content">Animation effects</span></a>
       <ol class="toc">
        <li><a href="#animation-effects-and-animations"><span class="secno">4.5.1</span> <span class="content">Relationship between animation effects
  and animations</span></a>
        <li><a href="#types-of-animation-effects"><span class="secno">4.5.2</span> <span class="content">Types of animation effects</span></a>
        <li><a href="#the-active-interval"><span class="secno">4.5.3</span> <span class="content">The active interval</span></a>
        <li><a href="#local-time-section"><span class="secno">4.5.4</span> <span class="content">Local time</span></a>
        <li><a href="#animation-effect-phases-and-states"><span class="secno">4.5.5</span> <span class="content">Animation effect phases and
states</span></a>
       </ol>
      <li>
       <a href="#fill-behavior"><span class="secno">4.6</span> <span class="content">Fill behavior</span></a>
       <ol class="toc">
        <li><a href="#fill-modes"><span class="secno">4.6.1</span> <span class="content">Fill modes</span></a>
       </ol>
      <li>
       <a href="#repeating"><span class="secno">4.7</span> <span class="content">Repeating</span></a>
       <ol class="toc">
        <li><a href="#iteration-intervals"><span class="secno">4.7.1</span> <span class="content">Iteration intervals</span></a>
        <li><a href="#controlling-iteration"><span class="secno">4.7.2</span> <span class="content">Controlling iteration</span></a>
        <li><a href="#iteration-time-space"><span class="secno">4.7.3</span> <span class="content">Iteration time space</span></a>
        <li><a href="#interval-timing"><span class="secno">4.7.4</span> <span class="content">Interval timing</span></a>
       </ol>
      <li>
       <a href="#core-animation-effect-calculations"><span class="secno">4.8</span> <span class="content">Core animation effect calculations</span></a>
       <ol class="toc">
        <li><a href="#animation-effect-calculations-overview"><span class="secno">4.8.1</span> <span class="content">Overview</span></a>
        <li><a href="#calculating-the-active-duration"><span class="secno">4.8.2</span> <span class="content">Calculating the active duration</span></a>
        <li>
         <a href="#transforming-the-local-time"><span class="secno">4.8.3</span> <span class="content">Transforming the local time</span></a>
         <ol class="toc">
          <li><a href="#calculating-the-active-time"><span class="secno">4.8.3.1</span> <span class="content">Calculating the active time</span></a>
          <li><a href="#calculating-the-overall-progress"><span class="secno">4.8.3.2</span> <span class="content">Calculating the overall progress</span></a>
          <li><a href="#calculating-the-simple-iteration-progress"><span class="secno">4.8.3.3</span> <span class="content">Calculating the simple iteration progress</span></a>
         </ol>
        <li><a href="#calculating-the-current-iteration"><span class="secno">4.8.4</span> <span class="content">Calculating the current iteration</span></a>
       </ol>
      <li>
       <a href="#direction-control"><span class="secno">4.9</span> <span class="content">Direction control</span></a>
       <ol class="toc">
        <li><a href="#calculating-the-directed-progress"><span class="secno">4.9.1</span> <span class="content">Calculating the directed progress</span></a>
       </ol>
      <li>
       <a href="#time-transformations"><span class="secno">4.10</span> <span class="content">Time transformations</span></a>
       <ol class="toc">
        <li><a href="#calculating-the-transformed-progress"><span class="secno">4.10.1</span> <span class="content">Calculating the transformed progress</span></a>
       </ol>
      <li><a href="#the-iteration-progress"><span class="secno">4.11</span> <span class="content">The iteration progress</span></a>
     </ol>
    <li>
     <a href="#animation-model"><span class="secno">5</span> <span class="content">Animation model</span></a>
     <ol class="toc">
      <li><a href="#introduction-to-the-animation-model"><span class="secno">5.1</span> <span class="content">Introduction</span></a>
      <li>
       <a href="#animating-properties"><span class="secno">5.2</span> <span class="content">Animating properties</span></a>
       <ol class="toc">
        <li><a href="#custom-properties"><span class="secno">5.2.1</span> <span class="content">Custom Properties</span></a>
       </ol>
      <li>
       <a href="#keyframe-effects"><span class="secno">5.3</span> <span class="content">Keyframe effects</span></a>
       <ol class="toc">
        <li><a href="#keyframes-section"><span class="secno">5.3.1</span> <span class="content">Keyframes</span></a>
        <li><a href="#calculating-computed-keyframes"><span class="secno">5.3.2</span> <span class="content">Calculating computed keyframes</span></a>
        <li><a href="#the-effect-value-of-a-keyframe-animation-effect"><span class="secno">5.3.3</span> <span class="content">The effect value of
  a keyframe effect</span></a>
       </ol>
      <li>
       <a href="#combining-effects"><span class="secno">5.4</span> <span class="content">Combining effects</span></a>
       <ol class="toc">
        <li><a href="#animation-classes"><span class="secno">5.4.1</span> <span class="content">Animation classes</span></a>
        <li><a href="#the-effect-stack"><span class="secno">5.4.2</span> <span class="content">The effect stack</span></a>
        <li><a href="#calculating-the-result-of-an-effect-stack"><span class="secno">5.4.3</span> <span class="content">Calculating the result of an effect stack</span></a>
        <li><a href="#effect-composition"><span class="secno">5.4.4</span> <span class="content">Effect composition</span></a>
        <li><a href="#applying-the-composited-result"><span class="secno">5.4.5</span> <span class="content">Applying the composited result</span></a>
       </ol>
      <li>
       <a href="#replacing-animations"><span class="secno">5.5</span> <span class="content">Replacing animations</span></a>
       <ol class="toc">
        <li><a href="#animation-replace-state"><span class="secno">5.5.1</span> <span class="content">Replace state</span></a>
        <li><a href="#removing-replaced-animations"><span class="secno">5.5.2</span> <span class="content">Removing replaced animations</span></a>
       </ol>
      <li><a href="#side-effects-section"><span class="secno">5.6</span> <span class="content">Side effects of animation</span></a>
     </ol>
    <li>
     <a href="#programming-interface"><span class="secno">6</span> <span class="content">Programming interface</span></a>
     <ol class="toc">
      <li><a href="#time-values-in-the-programming-interface"><span class="secno">6.1</span> <span class="content">Time values in the programming interface</span></a>
      <li><a href="#the-animationtimeline-interface"><span class="secno">6.2</span> <span class="content">The <code>AnimationTimeline</code> interface</span></a>
      <li><a href="#the-documenttimeline-interface"><span class="secno">6.3</span> <span class="content">The <code>DocumentTimeline</code> interface</span></a>
      <li>
       <a href="#the-animation-interface"><span class="secno">6.4</span> <span class="content">The <code>Animation</code> interface</span></a>
       <ol class="toc">
        <li><a href="#the-animationplaystate-enumeration"><span class="secno">6.4.1</span> <span class="content">The <code>AnimationPlayState</code> enumeration</span></a>
        <li><a href="#the-animationreplacestate-enumeration"><span class="secno">6.4.2</span> <span class="content">The <code>AnimationReplaceState</code> enumeration</span></a>
       </ol>
      <li>
       <a href="#the-animationeffect-interface"><span class="secno">6.5</span> <span class="content">The <code>AnimationEffect</code> interface</span></a>
       <ol class="toc">
        <li><a href="#the-effecttiming-dictionaries"><span class="secno">6.5.1</span> <span class="content">The <code>EffectTiming</code> and <code>OptionalEffectTiming</code> dictionaries</span></a>
        <li><a href="#the-fillmode-enumeration"><span class="secno">6.5.2</span> <span class="content">The <code>FillMode</code> enumeration</span></a>
        <li><a href="#the-playbackdirection-enumeration"><span class="secno">6.5.3</span> <span class="content">The <code>PlaybackDirection</code> enumeration</span></a>
        <li><a href="#updating-animationeffect-timing"><span class="secno">6.5.4</span> <span class="content">Updating the timing of an <code>AnimationEffect</code></span></a>
        <li><a href="#the-computedeffecttiming-dictionary"><span class="secno">6.5.5</span> <span class="content">The <code>ComputedEffectTiming</code> dictionary</span></a>
       </ol>
      <li>
       <a href="#the-keyframeeffect-interface"><span class="secno">6.6</span> <span class="content">The <code>KeyframeEffect</code> interface</span></a>
       <ol class="toc">
        <li><a href="#creating-a-new-keyframeeffect-object"><span class="secno">6.6.1</span> <span class="content">Creating a new <code>KeyframeEffect</code> object</span></a>
        <li><a href="#property-name-conversion"><span class="secno">6.6.2</span> <span class="content">Property names and IDL names</span></a>
        <li><a href="#processing-a-keyframes-argument"><span class="secno">6.6.3</span> <span class="content">Processing a <code>keyframes</code> argument</span></a>
        <li><a href="#the-keyframeeffectoptions-dictionary"><span class="secno">6.6.4</span> <span class="content">The <code>KeyframeEffectOptions</code> dictionary</span></a>
       </ol>
      <li><a href="#the-compositeoperation-enumeration"><span class="secno">6.7</span> <span class="content">The <code>CompositeOperation</code> and <code>CompositeOperationOrAuto</code> enumerations</span></a>
      <li><a href="#the-animatable-interface-mixin"><span class="secno">6.8</span> <span class="content">The <code>Animatable</code> interface mixin</span></a>
      <li><a href="#extensions-to-the-document-interface"><span class="secno">6.9</span> <span class="content">Extensions to the <code>Document</code> interface</span></a>
      <li><a href="#extensions-to-the-documentorshadowroot-interface-mixin"><span class="secno">6.10</span> <span class="content">Extensions to the <code>DocumentOrShadowRoot</code> interface mixin</span></a>
      <li><a href="#extensions-to-the-element-interface"><span class="secno">6.11</span> <span class="content">Extensions to the <code>Element</code> interface</span></a>
      <li><a href="#the-animationplaybackevent-interface"><span class="secno">6.12</span> <span class="content">The <code>AnimationPlaybackEvent</code> interface</span></a>
      <li><a href="#model-liveness"><span class="secno">6.13</span> <span class="content">Model liveness</span></a>
     </ol>
    <li><a href="#integration-with-media-fragments"><span class="secno">7</span> <span class="content">Integration with Media Fragments</span></a>
    <li><a href="#interaction-with-page-display"><span class="secno">8</span> <span class="content">Interaction with page display</span></a>
    <li>
     <a href="#implementation-requirements"><span class="secno">9</span> <span class="content">Implementation requirements</span></a>
     <ol class="toc">
      <li><a href="#precision-of-time-values"><span class="secno">9.1</span> <span class="content">Precision of time values</span></a>
      <li><a href="#conformance-criteria"><span class="secno">9.2</span> <span class="content">Conformance criteria</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">10</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#changes-since-last-publication"><span class="secno">11</span> <span class="content">Changes since last publication</span></a>
    <li>
     <a href="#animation-types"><span class="secno"></span> <span class="content">Appendix A: Animation types of existing properties</span></a>
     <ol class="toc">
      <li><a href="#animating-font-weight"><span class="secno"></span> <span class="content">Animation of <span class="property">font-weight</span></span></a>
      <li><a href="#animating-visibility"><span class="secno"></span> <span class="content">Animation of <span class="property">visibility</span></span></a>
      <li><a href="#animating-shadow-lists"><span class="secno"></span> <span class="content">Animation of <span class="property">box-shadow</span></span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({showMathMenu: false});
</script>
<script src="MathJax/MathJax.js?config=MML_SVG"></script>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Web Animations defines a model for supporting animation and
synchronization on the Web platform.
It is intended that other specifications will build on this model and
expose its features through declarative means.
In addition, this specification also defines a programming interface to
the model that may be implemented by user agents that provide support
for scripting.</p>
    <h3 class="heading settled" data-level="1.1" id="use-cases"><span class="secno">1.1. </span><span class="content">Use cases</span><a class="self-link" href="#use-cases"></a></h3>
    <p>The Web Animations model is intended to provide the features necessary
for expressing CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1">[CSS-TRANSITIONS-1]</a>,
CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>, and
SVG <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.
As such, the use cases of Web Animations model is the union of use cases for
those three specifications.</p>
    <p>The use cases for the programming interface include the following:</p>
    <dl>
     <dt data-md>Inspecting running animations
     <dd data-md>
      <p>Often Web applications must wait for certain animated effects to complete
before updating some state.
The programming interface in this specification allows such applications
to wait for all currently running animation to complete,
regardless of whether they are defined by CSS Transitions, CSS Animations,
SVG animations, or created directly using the programming interface.</p>
      <div class="example" id="example-e8eccc9e">
       <a class="self-link" href="#example-e8eccc9e"></a> 
<pre class="lang-javascript highlight"><c- c1>// Wait until all animations have finished before removing the element</c->
Promise<c- p>.</c->all<c- p>(</c->
  elem<c- p>.</c->getAnimations<c- p>().</c->map<c- p>(</c->animation <c- p>=></c-> animation<c- p>.</c->finished<c- p>)</c->
<c- p>).</c->then<c- p>(()</c-> <c- p>=></c-> elem<c- p>.</c->remove<c- p>());</c->
</pre>
      </div>
      <p>Alternatively, applications may wish to query the playback state of
animations without waiting.</p>
      <div class="example" id="example-9a95d87d">
       <a class="self-link" href="#example-9a95d87d"></a> 
<pre class="lang-javascript highlight"><c- kr>const</c-> isAnimating <c- o>=</c-> elem<c- p>.</c->getAnimations<c- p>().</c->some<c- p>(</c->
  animation <c- p>=></c-> animation<c- p>.</c->playState <c- o>===</c-> <c- t>'running'</c->
<c- p>);</c->
</pre>
      </div>
     <dt data-md>Controlling running animations
     <dd data-md>
      <p>It is sometimes useful to perform playback control on animations
so that they can respond to external inputs.
For example, it may be necessary to pause all existing animations before
displaying a modal dialog so that they do not distract the user’s
attention.</p>
      <div class="example" id="example-e67fe245">
       <a class="self-link" href="#example-e67fe245"></a> 
<pre class="lang-javascript highlight"><c- c1>// Pause all existing animations in the document</c->
document<c- p>.</c->getAnimations<c- p>().</c->forEach<c- p>(</c->
  animation <c- p>=></c-> animation<c- p>.</c->pause<c- p>()</c->
<c- p>);</c->
</pre>
      </div>
     <dt data-md>Creating animations from script
     <dd data-md>
      <p>While it is possible to use ECMAScript to perform animation using <code>requestAnimationFrame</code> <a data-link-type="biblio" href="#biblio-html">[HTML]</a>,
such animations behave differently to declarative animation in terms of
how they are represented in the CSS cascade and the performance
optimizations that are possible such as performing the animation on a
separate thread.
Using the Web Animations programming interface, it is possible to
create animations from script that have the same behavior and performance
characteristics as declarative animations.</p>
      <div class="example" id="example-824e8c83">
       <a class="self-link" href="#example-824e8c83"></a> 
<pre class="lang-javascript highlight"><c- c1>// Fade out quickly</c->
elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'scale(0)'</c-><c- p>,</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>300</c-><c- p>);</c->
</pre>
      </div>
     <dt data-md>Animation debugging
     <dd data-md>
      <p>In a complex application, it may be difficult to determine how an
element arrived in its present state.
The Web Animations programming interface may be used to inspect
running animations to answer questions such as,
“Why is the opacity of this element changing?”</p>
      <div class="example" id="example-1ff8b03c">
       <a class="self-link" href="#example-1ff8b03c"></a> 
<pre class="lang-javascript highlight"><c- c1>// Print the id of any opacity animations on elem</c->
elem<c- p>.</c->getAnimations<c- p>().</c->filter<c- p>(</c->
  animation <c- p>=></c->
    animation<c- p>.</c->effect <c- k>instanceof</c-> KeyframeEffect <c- o>&amp;&amp;</c->
    animation<c- p>.</c->effect<c- p>.</c->getKeyframes<c- p>().</c->some<c- p>(</c->
      frame <c- p>=></c-> frame<c- p>.</c->hasOwnProperty<c- p>(</c-><c- t>'opacity'</c-><c- p>)</c->
    <c- p>)</c->
<c- p>).</c->forEach<c- p>(</c->animation <c- p>=></c-> console<c- p>.</c->log<c- p>(</c->animation<c- p>.</c->id<c- p>));</c->
</pre>
      </div>
      <p>Likewise, in order to fine tune animations, it is often necessary to
reduce their playback rate and replay them.</p>
      <div class="example" id="example-517f3219">
       <a class="self-link" href="#example-517f3219"></a> 
<pre class="lang-javascript highlight"><c- c1>// Slow down and replay any transform animations</c->
elem<c- p>.</c->getAnimations<c- p>().</c->filter<c- p>(</c->
  animation <c- p>=></c->
    animation<c- p>.</c->effect <c- k>instanceof</c-> KeyframeEffect <c- o>&amp;&amp;</c->
    animation<c- p>.</c->effect<c- p>.</c->getKeyframes<c- p>().</c->some<c- p>(</c->
      frame <c- p>=></c-> frame<c- p>.</c->hasOwnProperty<c- p>(</c-><c- t>'transform'</c-><c- p>)</c->
    <c- p>)</c->
<c- p>).</c->forEach<c- p>(</c->animation <c- p>=></c-> <c- p>{</c->
  animation<c- p>.</c->currentTime <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
  animation<c- p>.</c->updatePlaybackRate<c- p>(</c-><c- mf>0.5</c-><c- p>);</c->
<c- p>});</c->
</pre>
      </div>
     <dt data-md>Testing animations
     <dd data-md>
      <p>In order to test applications that make use of animations it is often
impractical to wait for such animations to run to completion.
Rather, it is desirable to seek the animations to specific times.</p>
    </dl>
    <div class="example" id="example-78167354">
     <a class="self-link" href="#example-78167354"></a> 
<pre class="lang-javascript highlight"><c- c1>// Seek to the half-way point of an animation and check that the opacity is 50%</c->
elem<c- p>.</c->getAnimations<c- p>().</c->forEach<c- p>(</c->
  animation <c- p>=></c->
    animation<c- p>.</c->currentTime <c- o>=</c->
      animation<c- p>.</c->effect<c- p>.</c->getComputedTiming<c- p>().</c->delay <c- o>+</c->
      animation<c- p>.</c->effect<c- p>.</c->getComputedTiming<c- p>().</c->activeDuration <c- o>/</c-> <c- mi>2</c-><c- p>;</c->
<c- p>);</c->
assert<c- p>.</c->strictEqual<c- p>(</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->opacity<c- p>,</c-> <c- t>'0.5'</c-><c- p>);</c->

<c- c1>// Check that the loading screen is hidden after the animations finish</c->
elem<c- p>.</c->getAnimations<c- p>().</c->forEach<c- p>(</c->
  animation <c- p>=></c-> animation<c- p>.</c->finish<c- p>()</c->
<c- p>);</c->
<c- c1>// Wait one frame so that event handlers have a chance to run</c->
requestAnimationFrame<c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  assert<c- p>.</c->strictEqual<c- p>(</c->
    getComputedStyle<c- p>(</c->document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#loading'</c-><c- p>)).</c->display<c- p>,</c-> <c- t>'none'</c-><c- p>);</c->
<c- p>});</c->
</pre>
    </div>
    <h3 class="heading settled" data-level="1.2" id="relationship-to-other-specifications"><span class="secno">1.2. </span><span class="content">Relationship to other specifications</span><a class="self-link" href="#relationship-to-other-specifications"></a></h3>
    <p>CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1">[CSS-TRANSITIONS-1]</a>, CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>, and
SVG <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> all provide mechanisms that
generate animated content on a Web page.
Although the three specifications provide many similar features,
they are described in different terms.
This specification proposes an abstract animation model that
encompasses the common features of all three specifications.
This model is backwards-compatible with the current behavior of these
specifications such that they can be defined in terms of this model
without any observable change.</p>
    <p>The animation features in SVG 1.1 are defined in terms of SMIL
Animation <a data-link-type="biblio" href="#biblio-smil-animation">[SMIL-ANIMATION]</a>.
It is intended that by defining SVG’s animation features in terms of
the Web Animations model, the dependency between SVG and SMIL
Animation can be removed.</p>
    <p>As with <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames" id="ref-for-animation-frames">animation frame callbacks</a> (commonly referred
to as “requestAnimationFrame”) <a data-link-type="biblio" href="#biblio-html">[HTML]</a>,
the programming interface component of this specification allows
animations to be created from script.
The animations created using the interface defined in this
specification, however, once created, are executed entirely by the
user agent meaning they share the same performance characteristics as
animations defined by markup.
Using this interface it is possible to create animations
from script in a simpler and more performant manner.</p>
    <p>The time values used within the programming interface
correspond with those used in <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames" id="ref-for-animation-frames①">animation frame callbacks</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a> and their execution order is defined such that the two interfaces can be used
simultaneously without conflict.</p>
    <p>The programming interface component of this specification makes
some additions to interfaces defined in HTML <a data-link-type="biblio" href="#biblio-html">[HTML]</a>.</p>
    <h3 class="heading settled" data-level="1.3" id="overview-of-this-specification"><span class="secno">1.3. </span><span class="content">Overview of this specification</span><a class="self-link" href="#overview-of-this-specification"></a></h3>
    <p>This specification begins by defining an abstract model for animation.
This is followed by a programming interface defined in terms of the
abstract model.
The programming interface is defined in terms of the abstract model
and is only relevant to user agents that provide scripting support.</p>
   </div>
   <h2 class="heading settled" data-level="2" id="spec-conventions"><span class="secno">2. </span><span class="content">Specification conventions</span><a class="self-link" href="#spec-conventions"></a></h2>
   <p>This specification begins by describing abstract concepts such as <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation">animations</a> and <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect">animation effects</a> and properties that belong to them such as their <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate">playback rate</a> or <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration">iteration duration</a>.
In addition to these properties, there are often specific procedures for
updating these properties such as the procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate">set the playback rate</a> or
the procedure to <a data-link-type="dfn" href="#set-the-start-time" id="ref-for-set-the-start-time">set the start time</a> of an animation.</p>
   <p>Where this specification does not specifically link to a procedure, text
that requires the user agent to update a property such as, “make <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved">unresolved</a>”, should be understood to
refer to updating the property directly <em>without</em> invoking any related
procedure.</p>
   <p>Further documentation conventions that are not specific to this specification
are described in <a href="#document-conventions">Document conventions</a>.</p>
   <h2 class="heading settled" data-level="3" id="web-animations-model-overview"><span class="secno">3. </span><span class="content">Web Animations model overview</span><a class="self-link" href="#web-animations-model-overview"></a></h2>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>At a glance, the Web Animations model consists of two largely
independent pieces, a <em>timing model</em> and an <em>animation
model</em>.  The role of these pieces is as follows:</p>
    <dl>
     <dt data-md>Timing model
     <dd data-md>
      <p>Takes a moment in time and converts it to a proportional distance
within a single iteration of an animation called the <em>iteration
progress</em>.
The <em>iteration index</em> is also recorded since some animations vary
each time they repeat.</p>
     <dt data-md>Animation model
     <dd data-md>
      <p>Takes the <em>iteration progress</em> values and <em>iteration indices</em> produced by the timing model and converts them into a series of values
to apply to the target properties.</p>
    </dl>
    <p>Graphically, this flow can be represented as follows:</p>
    <figure>
      <img alt="Overview of the operation of the Web Animations model." src="img/timing-and-animation-models.svg" width="600"> 
     <figcaption> Overview of the operation of the Web Animations model.<br> The current time is input to the timing model which produces an iteration
    progress value and an iteration index.<br> These parameters are used as input to the animation model which produces
    the values to apply. </figcaption>
    </figure>
    <p>For example, consider an animation that:</p>
    <ul>
     <li data-md>
      <p>starts after 3 seconds</p>
     <li data-md>
      <p>runs twice,</p>
     <li data-md>
      <p>takes 2 seconds every time, and</p>
     <li data-md>
      <p>changes the width of a rectangle from 50 pixels to 100 pixels.</p>
    </ul>
    <p>The first three points apply to the timing model.
At a time of 6 seconds, it will calculate that the animation should be
half-way through its second iteration and produces the result 0.5.
The animation model then uses that information to calculate a width.</p>
    <p>This specification begins with the timing model and then proceeds to
the animation model.</p>
   </div>
   <h2 class="heading settled" data-level="4" id="timing-model"><span class="secno">4. </span><span class="content">Timing model</span><a class="self-link" href="#timing-model"></a></h2>
   <p>This section describes and defines the behavior of the Web Animations
timing model.</p>
   <h3 class="heading settled" data-level="4.1" id="timing-model-overview"><span class="secno">4.1. </span><span class="content">Timing model overview</span><a class="self-link" href="#timing-model-overview"></a></h3>
   <div class="informative-bg">
    <p><em>This section is non-normative</em></p>
    <p>Two features characterize the Web Animations timing model: it is <em>stateless</em> and it is <em>hierarchical</em>.</p>
    <h4 class="heading settled" data-level="4.1.1" id="stateless"><span class="secno">4.1.1. </span><span class="content">Stateless</span><a class="self-link" href="#stateless"></a></h4>
    <p>The Web Animations timing model operates by taking an input time and
producing an output iteration progress.
Since the output is based solely on the input time and is independent
of previous inputs, the model may be described as stateless.
This gives the model the following properties:</p>
    <dl>
     <dt data-md>Frame-rate independent
     <dd data-md>
      <p>Since the output is independent of previous inputs, the rate at
which the model is updated will not affect its progress.
Provided the input times are proportional to the progress of
real-world time, animations will progress at an identical rate
regardless of the capabilities of the device running them.</p>
     <dt data-md>Direction-agnostic
     <dd data-md>
      <p>Since the sequence of inputs is insignificant, the model is
directionless.
This means that the model can be updated to an arbitrary moment
without requiring any specialized handling.</p>
     <dt data-md>Constant-time seeking
     <dd data-md>
      <p>Since each input is independent of the previous input, the
processing required to perform a seek operation, even far into the
future, is at least potentially constant.</p>
    </dl>
    <p>There are a few exceptions to the stateless behavior of the timing
model.</p>
    <p>Firstly, a number of methods defined in the <a href="#programming-interface">programming interface</a> to the model
provide play control such as pausing an animation.
These methods are defined in terms of the time at which they are
called and are therefore stative.
These methods are provided primarily for convenience and are not part
of the core timing model but are layered on top.</p>
    <p>Similarly, the <a href="#reaching-the-end">finishing behavior</a> of
animations means that dynamic changes to the end time of
the media (<a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect">associated effect</a>) of an animation may produce a
different result depending on when the change occurs.
This behavior is somewhat unfortunate but has been deemed intuitive
and consistent with HTML.
As a result, the model can only truly be described as stateless <em>in the absence of dynamic changes to its timing properties</em>.</p>
    <p>Finally, each time the model is updated, it can be considered to
establish a temporary state.
While this temporary state affects the values returned from the <a href="#programming-interface">programming interface</a>, it has no
influence on the subsequent updates and hence does not conflict with
the stateless qualities described above.</p>
    <h4 class="heading settled" data-level="4.1.2" id="hierarchical"><span class="secno">4.1.2. </span><span class="content">Hierarchical</span><a class="self-link" href="#hierarchical"></a></h4>
    <p>The other characteristic feature of the timing model is that time is inherited.
Time begins at a timeline and cascades down a number of steps to each
animation effect.
At each step, time may be shifted backwards and forwards, scaled,
reversed, paused, and repeated.</p>
    <figure>
      <img alt="A hierarchy of timing nodes" src="img/time-hierarchy.svg" width="350"> 
     <figcaption> A hierarchy of timing nodes.
    Each node in the tree derives its time from its parent node. </figcaption>
    </figure>
    <p>In this level of the specification the hierarchy is shallow.
A subsequent level of this specification will introduce the concept
of group effects which allows for deeper timing hierarchies.</p>
   </div>
   <h3 class="heading settled" data-level="4.2" id="time-value-section"><span class="secno">4.2. </span><span class="content">Time values</span><a class="self-link" href="#time-value-section"></a></h3>
   <p>Timing is based on a hierarchy of time relationships between timing nodes.
Parent nodes provide timing information to their child nodes in the form
of <a data-link-type="dfn" href="#time-value" id="ref-for-time-value">time values</a>.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="time-value">time value</dfn> is a real number which nominally represents
a number of milliseconds from some moment.
The connection between <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①">time values</a> and wall-clock milliseconds
may be obscured by any number of transformations applied to the value as
it passes through the time hierarchy.</p>
   <p class="note" role="note"> In the future there may be timelines that are based on scroll position
or UI gestures in which case the connection between time values and
milliseconds will be weakened even further. </p>
   <p>A <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②">time value</a> may also be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="unresolved">unresolved</dfn> if, for example,
a timing node is not in a state to produce a <span id="ref-for-time-value③">time value</span>.</p>
   <h3 class="heading settled" data-level="4.3" id="timelines"><span class="secno">4.3. </span><span class="content">Timelines</span><a class="self-link" href="#timelines"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="timeline">timeline</dfn> provides a source of <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④">time values</a> for the
purpose of synchronization.</p>
   <p>At any given moment, a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline">timeline</a> has a single current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑤">time value</a> known
simply as the timeline’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="timeline current time" data-noexport id="timeline-current-time">current time</dfn>.</p>
   <p>A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①">timeline</a> may not always be able to return a meaningful <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑥">time
value</a>, but only an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①">unresolved</a> time value. For example, it may
be defined relative to a moment that has yet to occur, such as the firing of
a document’s load event.
A <span id="ref-for-timeline②">timeline</span> is considered to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inactive timeline" data-noexport id="inactive-timeline">inactive</dfn> when its <span id="ref-for-time-value⑦">time value</span> is <span id="ref-for-unresolved②">unresolved</span>.</p>
   <p>A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③">timeline</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="monotonically increasing" data-lt="monotonically increasing timeline" id="monotonically-increasing-timeline">monotonically increasing</dfn> if its
reported <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time">current time</a> is always greater than or equal
than its previously reported <span id="ref-for-timeline-current-time①">current time</span>.</p>
   <p>Specific types of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④">timelines</a> may define a procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="timeline time
to origin-relative time" id="timeline-time-to-origin-relative-time">convert a timeline time to an
origin-relative time</dfn> for <a data-link-type="dfn" href="#time-value" id="ref-for-time-value⑧">time value</a> <var>time</var>, so that the <span id="ref-for-time-value⑨">time
values</span> produced by wallclock-based timelines can be compared.</p>
   <p>A <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤">timeline</a> may be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="timeline associated with
a document" data-noexport id="timeline-associated-with-a-document">associated with a document</dfn>.</p>
   <p>When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="update-animations-and-send-events">update animations and send events</dfn> for
a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> <var>doc</var> at timestamp <var>now</var>, run these steps:</p>
   <ol>
    <li data-md>
     <p>Update the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time②">current time</a> of all
 timelines <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document">associated with <var>doc</var></a> passing <var>now</var> as the timestamp.</p>
     <div class="note" role="note">
      <p>Due to the hierarchical nature of the timing model, updating the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time③">current time</a> of a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑥">timeline</a> also
 involves:</p>
      <ul>
       <li data-md>
        <p>Updating the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time">current time</a> of any <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①">animations</a> <a data-link-type="dfn" href="#associated-with-a-timeline" id="ref-for-associated-with-a-timeline">associated with</a> the timeline.</p>
       <li data-md>
        <p>Running the <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state">update an animation’s finished state</a> procedure for any
  animations whose <a data-link-type="dfn" href="#current-time" id="ref-for-current-time①">current time</a> has been updated.</p>
       <li data-md>
        <p>Queueing <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events">animation events</a> for any such animations.</p>
      </ul>
     </div>
    <li data-md>
     <p><a data-link-type="dfn" href="#remove-replaced-animations" id="ref-for-remove-replaced-animations">Remove replaced animations</a> for <var>doc</var>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint">Perform a microtask checkpoint</a>.</p>
     <p class="note" role="note"><span>Note:</span> This is to ensure that any microtasks queued up as a result of
 resolving or rejecting Promise objects as part of updating timelines in the
 previous step, run their callbacks prior to dispatching animation events.</p>
    <li data-md>
     <p>Let <var>events to dispatch</var> be a copy of <var>doc</var>’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue">pending animation event
 queue</a>.</p>
    <li data-md>
     <p>Clear <var>doc</var>’s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue①">pending animation event queue</a>.</p>
    <li data-md>
     <p>Perform a stable sort of the <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events①">animation events</a> in <var>events to dispatch</var> as follows:</p>
     <ol>
      <li data-md>
       <p>Sort the events by their <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time">scheduled event time</a> such that events
  that were scheduled to occur earlier, sort before events scheduled to
  occur later and events whose scheduled event time is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③">unresolved</a> sort before events with a <span id="ref-for-unresolved④">resolved</span> scheduled event time.</p>
      <li data-md>
       <p>Within events with equal <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time①">scheduled event times</a>, sort by their <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order">composite order</a>.</p>
     </ol>
     <p class="note" role="note"><span>Note:</span> The purpose of sorting events is to ensure that, as best possible,
 even on devices with differing capabilities and hence different frame
 rates, events are dispatched in a consistent order.</p>
     <p class="note" role="note"><span>Note:</span> The requirement for the sort to be a stable sort is because sometimes
 events may be queued with the same scheduled event time. For example, a CSS
 animation with a duration of zero, may dispatch both
 an <code>animationstart</code> and an <code>animationend</code> event and
 the order of these events should be preserved.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch">Dispatch</a> each of the events in <var>events to dispatch</var> at their
 corresponding target using the order established in the previous step.</p>
   </ol>
   <p>It is often convenient to describe each time this procedure is invoked as
establishing a new <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="animation-frame">animation frame</dfn>.
Changes to the timing properties of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②">animations</a> or <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①">animation effects</a>, or
the addition and removal of the objects may cause the output of the timing or
animation model to change, but these operations in themselves do not create
a new <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame">animation frame</a>, rather they merely update the current <span id="ref-for-animation-frame①">animation
frame</span>.</p>
   <h4 class="heading settled" data-level="4.3.1" id="document-timelines"><span class="secno">4.3.1. </span><span class="content">Document timelines</span><a class="self-link" href="#document-timelines"></a></h4>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-timeline">document timeline</dfn> is a type of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑦">timeline</a> that is <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document①">associated
with a document</a> and whose <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time④">current time</a> is calculated as a fixed offset from the <var>now</var> timestamp provided each time the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events">update animations and send events</a> procedure is run.
This fixed offset is referred to as the document timeline’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="origin time" data-noexport id="origin-time">origin
time</dfn>.</p>
   <p class="issue" id="issue-3513726c"><a class="self-link" href="#issue-3513726c"></a> There must be a better term than “origin time”—
             it’s too similar to “time origin”. <a href="https://github.com/w3c/csswg-drafts/issues/2079">&lt;https://github.com/w3c/csswg-drafts/issues/2079></a></p>
   <p>Prior to establishing the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#time-origin" id="ref-for-time-origin">time origin</a> for its associated document,
a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline">document timeline</a> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline">inactive</a>.</p>
   <p>After a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline①">document timeline</a> becomes <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①">active</a>, it is <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline">monotonically increasing</a>.</p>
   <p>A <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline②">document timeline</a> that is associated with a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> which is not
an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a> is also considered to be <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline②">inactive</a>.</p>
   <p>To <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time">convert a timeline
time, <var>timeline time</var>, to an origin-relative time</a> for a document timeline, <var>timeline</var>, return the sum of the <var>timeline time</var> and <var>timeline</var>’s <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time">origin
time</a>. If <var>timeline</var> is inactive, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⓪">time value</a>.</p>
   <h4 class="heading settled" data-level="4.3.2" id="the-documents-default-timeline"><span class="secno">4.3.2. </span><span class="content">The default document timeline</span><a class="self-link" href="#the-documents-default-timeline"></a></h4>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> has a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline③">document timeline</a> called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="default document timeline" data-noexport id="default-document-timeline">default
document timeline</dfn>.
The <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline">default document timeline</a> is unique to each document and persists for
the lifetime of the document including calls to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open" id="ref-for-dom-document-open">document.open()</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a>.</p>
   <p>The <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline①">default document timeline</a> has an <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time①">origin time</a> of zero.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Since no scaling is applied to the <var>now</var> timestamp values provided
to <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline④">document timelines</a>, the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①①">time values</a> it produces will be
proportional to wall-clock milliseconds.</p>
    <p>Furthermore, since the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①②">time values</a> of the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline②">default document
timeline</a> have a zero offset from the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#time-origin" id="ref-for-time-origin①">time origin</a>, <code>document.timeline.currentTime</code> will roughly correspond to <a href="https://www.w3.org/TR/hr-time/#dom-performance-now"> <code>Performance.now()</code></a> <a data-link-type="biblio" href="#biblio-hr-time">[HR-TIME]</a> with the exception that <code>document.timeline.currentTime</code> does not change in between calls
to the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events①">update animations and send events</a> procedure.</p>
   </div>
   <h3 class="heading settled" data-level="4.4" id="animations"><span class="secno">4.4. </span><span class="content">Animations</span><a class="self-link" href="#animations"></a></h3>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The children of a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑧">timeline</a> are called <em>animations</em>.
An animation takes an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②">animation effect</a> which is a static
description of some timed behavior and binds it to a <span id="ref-for-timeline⑨">timeline</span> so that it runs.
An animation also allows run-time control of the connection between the <span id="ref-for-animation-effect③">animation effect</span> and its <span id="ref-for-timeline①⓪">timeline</span> by providing pausing,
seeking, and speed control.
The relationship between an animation and an <span id="ref-for-animation-effect④">animation effect</span> is
analogous to that of a DVD player and a DVD.</p>
   </div>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="concept-animation">animation</dfn> connects a single <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤">animation
effect</a>, called its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-effect">associated effect</dfn>, to a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①①">timeline</a> and
provides playback control.
Both of these associations are optional and configurable such that
an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③">animation</a> may have no <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①">associated effect</a> or <span id="ref-for-timeline①②">timeline</span> at a given moment.</p>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④">animation’s</a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-for-timing">document for timing</dfn> is the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> with which
its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①③">timeline</a> is <a data-link-type="dfn" href="#timeline-associated-with-a-document" id="ref-for-timeline-associated-with-a-document②">associated</a>.
If an animation is not associated with a timeline, or its timeline is not
associated with a document, then it has no <a data-link-type="dfn" href="#document-for-timing" id="ref-for-document-for-timing">document for timing</a>.</p>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤">animation</a>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-time">start time</dfn> is the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①③">time value</a> of its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①④">timeline</a> when its <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②">associated effect</a> is scheduled to begin playback.
An animation’s start time is initially <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥">unresolved</a>.</p>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥">animation</a> also maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="hold-time">hold time</dfn> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①④">time value</a> which is used to fix the animation’s output <span id="ref-for-time-value①⑤">time value</span>, called its <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②">current time</a>, in circumstances such as pausing.
The <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time">hold time</a> is initially <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦">unresolved</a>.</p>
   <p>In order to establish the relative ordering of conflicting <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦">animations</a>,
animations are appended to a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="global-animation-list">global animation list</dfn> in the order
in which they are created. Certain <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class">classes of
animations</a>, however, may provide alternative means of ordering animations
(see <a href="#animation-classes">§ 5.4.1 Animation classes</a>).</p>
   <h4 class="heading settled" data-level="4.4.1" id="setting-the-timeline"><span class="secno">4.4.1. </span><span class="content">Setting the timeline of an animation</span><a class="self-link" href="#setting-the-timeline"></a></h4>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-timeline-of-an-animation">set the timeline of an animation</dfn>, <var>animation</var>, to <var>new timeline</var> which may be null, is as
follows:</p>
   <ol>
    <li data-md>
     <p>Let <var>old timeline</var> be the current <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑤">timeline</a> of <var>animation</var>, if any.</p>
    <li data-md>
     <p>If <var>new timeline</var> is the same object as <var>old timeline</var>,
abort this procedure.</p>
    <li data-md>
     <p>Let the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑥">timeline</a> of <var>animation</var> be <var>new timeline</var>.</p>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧">resolved</a>, make <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①">hold time</a> <span id="ref-for-unresolved⑨">unresolved</span>.</p>
     <p class="note" role="note"><span>Note:</span> This step ensures that the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state">finished play state</a> of <var>animation</var> is not “sticky” but is re-evaluated
based on its updated <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③">current time</a>.</p>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state①">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and
the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.2" id="responding-to-a-newly-inactive-timeline"><span class="secno">4.4.2. </span><span class="content">Responding to a newly inactive
  timeline</span><a class="self-link" href="#responding-to-a-newly-inactive-timeline"></a></h4>
   <p class="issue" id="issue-4490c13e"><a class="self-link" href="#issue-4490c13e"></a> With the set of timelines defined in this level of this
             specification, this situation is not expected to occur. As
             a result, this section will likely be moved to a subsequent level
             of this specification. <a href="https://github.com/w3c/csswg-drafts/issues/2080">&lt;https://github.com/w3c/csswg-drafts/issues/2080></a></p>
   <p>When the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑦">timeline</a> associated with an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑧">animation</a>, <var>animation</var>, becomes newly <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline③">inactive</a>,
if <var>animation</var>’s <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time">previous current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪">resolved</a>, the procedure to <a data-link-type="dfn" href="#silently-set-the-current-time" id="ref-for-silently-set-the-current-time">silently set the current
time</a> of <var>animation</var> to <span id="ref-for-previous-current-time①">previous current time</span> is run.</p>
   <div class="note" role="note">
    <p>This step makes the behavior when an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑨">animation</a>’s <a data-link-type="dfn" href="#timeline" id="ref-for-timeline①⑧">timeline</a> becomes <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline④">inactive</a> consistent with when it is
disassociated with a <span id="ref-for-timeline①⑨">timeline</span>.
Furthermore, it ensures that the only occasion on which an <span id="ref-for-concept-animation①⓪">animation</span> becomes <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state">idle</a>, is when the procedure to <a data-link-type="dfn" href="#cancel-an-animation" id="ref-for-cancel-an-animation">cancel an animation</a> is performed.</p>
   </div>
   <h4 class="heading settled" data-level="4.4.3" id="setting-the-associated-effect"><span class="secno">4.4.3. </span><span class="content">Setting the associated effect of an animation</span><span id="setting-the-target-effect"></span><a class="self-link" href="#setting-the-associated-effect"></a></h4>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-associated-effect-of-an-animation">set the associated effect of an animation</dfn>, <var>animation</var>, to <var>new effect</var> which may be null, is as
follows:</p>
   <ol>
    <li data-md>
     <p>Let <var>old effect</var> be the current <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect③">associated effect</a> of <var>animation</var>, if any.</p>
    <li data-md>
     <p>If <var>new effect</var> is the same object as <var>old effect</var>,
abort this procedure.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task">pending pause task</a>, reschedule that
task to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready">ready</a>.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task">pending play task</a>, reschedule that task
to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready①">ready</a> to play <var>new
effect</var>.</p>
    <li data-md>
     <p>If <var>new effect</var> is not <code>null</code> and
if <var>new effect</var> is the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect④">associated effect</a> of another <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①①">animation</a>, <var>previous animation</var>, run the procedure to <a data-link-type="dfn" href="#set-the-associated-effect-of-an-animation" id="ref-for-set-the-associated-effect-of-an-animation">set
the associated effect of an animation</a> (this procedure) on <var>previous
animation</var> passing null as <var>new effect</var>.</p>
    <li data-md>
     <p>Let the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect⑤">associated effect</a> of <var>animation</var> be <var>new
effect</var>.</p>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state②">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and
the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="reset-an-animations-pending-tasks">reset an animation’s pending tasks</dfn> for <var>animation</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>If <var>animation</var> does not have a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①">pending play task</a> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①">pending pause task</a>, abort this procedure.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task②">pending play task</a>, cancel that task.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task②">pending pause task</a>, cancel that task.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate">Apply any pending playback rate</a> on <var>animation</var>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#reject" id="ref-for-reject">Reject</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise">current ready
promise</a> with a DOMException named "AbortError".</p>
    <li data-md>
     <p>Let <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①">current ready promise</a> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-promise-resolved-with" id="ref-for-a-promise-resolved-with">creating a new resolved Promise
object</a> with value <var>animation</var> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a> of <var>animation</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.4" id="the-current-time-of-an-animation"><span class="secno">4.4.4. </span><span class="content">The current time of an animation</span><a class="self-link" href="#the-current-time-of-an-animation"></a></h4>
   <p><a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①②">Animations</a> provide a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑥">time value</a> to their <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect⑥">associated
effect</a> called the animation’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-time">current time</dfn>.</p>
   <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④">current time</a> is calculated from the first
matching condition from below:</p>
   <div class="switch">
    <dl>
     <dt data-md>If the animation’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①①">resolved</a>,
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤">current time</a> is the animation’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③">hold time</a>.</p>
     <dt data-md>
      <p>If <em>any</em> of the following are true:</p>
      <ol>
       <li data-md>
        <p>the animation has no associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⓪">timeline</a>, or</p>
       <li data-md>
        <p>the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②①">timeline</a> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑤">inactive</a>, or</p>
       <li data-md>
        <p>the animation’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①②">unresolved</a>.</p>
      </ol>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑥">current time</a> is an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①③">unresolved</a> time value.</p>
     <dt data-md>Otherwise,
     <dd data-md>
      <blockquote> <code><a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑦">current time</a> = (<var>timeline time</var> - <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③">start time</a>)
  × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①">playback rate</a></code> </blockquote>
      <p>Where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑦">time value</a> of
the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②②">timeline</a>.
The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②">playback rate</a> value is defined in <a href="#speed-control">§ 4.4.16 Speed control</a>.</p>
    </dl>
   </div>
   <h4 class="heading settled" data-level="4.4.5" id="setting-the-current-time-of-an-animation"><span class="secno">4.4.5. </span><span class="content">Setting the current time of an animation</span><a class="self-link" href="#setting-the-current-time-of-an-animation"></a></h4>
   <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑧">current time</a> of an animation can be set to a new value to <em>seek</em> the animation.
The procedure for setting the current time is defined in two parts.</p>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="silently-set-the-current-time">silently set the current time</dfn> of
an animation, <var>animation</var>, to <var>seek time</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>If <var>seek time</var> is an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①④">unresolved</a> time value,
then perform the following steps.</p>
     <ol>
      <li data-md>
       <p>If the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑨">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑤">resolved</a>, then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <span class="exceptionname">TypeError</span>.</p>
      <li data-md>
       <p>Abort these steps.</p>
     </ol>
    <li data-md>
     <p>Update either <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time④">hold time</a> or <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④">start time</a> as follows:</p>
     <div class="switch">
      <dl>
       <dt data-md>
        <p>If <em>any</em> of the following conditions are true:</p>
        <ul>
         <li data-md>
          <p><var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time⑤">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑥">resolved</a>, or</p>
         <li data-md>
          <p><var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time⑤">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑦">unresolved</a>, or</p>
         <li data-md>
          <p><var>animation</var> has no associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②③">timeline</a> or the
associated <span id="ref-for-timeline②④">timeline</span> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑥">inactive</a>, or</p>
         <li data-md>
          <p><var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③">playback rate</a> is 0,</p>
        </ul>
       <dd data-md>
        <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time⑥">hold time</a> to <var>seek time</var>.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time⑥">start time</a> to the result of evaluating <code><var>timeline time</var> - (<var>seek time</var> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑧">time value</a> of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⑤">timeline</a> associated with <var>animation</var>.</p>
      </dl>
     </div>
    <li data-md>
     <p>If <var>animation</var> has no associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⑥">timeline</a> or the associated <span id="ref-for-timeline②⑦">timeline</span> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑦">inactive</a>,
make <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time⑦">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑧">unresolved</a>.</p>
     <p class="note" role="note"> This preserves the invariant that when we don’t have an active timeline it
  is only possible to set <em>either</em> the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time⑧">start time</a> <em>or</em> the animation’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⓪">current time</a>. </p>
    <li data-md>
     <p>Make <var>animation</var>’s <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time②">previous current time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⑨">unresolved</a>.</p>
   </ol>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-current-time">set the current time</dfn> of an animation, <var>animation</var>, to <var>seek time</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>Run the steps to <a data-link-type="dfn" href="#silently-set-the-current-time" id="ref-for-silently-set-the-current-time①">silently set the current time</a> of <var>animation</var> to <var>seek time</var>.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task③">pending pause task</a>, synchronously
complete the pause operation by performing the following steps:</p>
     <ol>
      <li data-md>
       <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time⑦">hold time</a> to <var>seek time</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate①">Apply any pending playback rate</a> to <var>animation</var>.</p>
      <li data-md>
       <p>Make <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time⑨">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⓪">unresolved</a>.</p>
      <li data-md>
       <p>Cancel the <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task④">pending pause task</a>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise②">current ready promise</a> with <var>animation</var>.</p>
     </ol>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state③">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to true, and
the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.6" id="setting-the-start-time-of-an-animation"><span class="secno">4.4.6. </span><span class="content">Setting the start time of an animation</span><a class="self-link" href="#setting-the-start-time-of-an-animation"></a></h4>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-start-time">set the start time</dfn> of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①③">animation</a>, <var>animation</var>, to <var>new start time</var>,
is as follows:</p>
   <ol>
    <li data-md>
     <p>Let <var>timeline time</var> be the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value①⑨">time value</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline②⑧">timeline</a> that <var>animation</var> is associated with.
If there is no <span id="ref-for-timeline②⑨">timeline</span> associated with <var>animation</var> or the
associated timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑧">inactive</a>,
let the <var>timeline time</var> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②①">unresolved</a>.</p>
    <li data-md>
     <p>If <var>timeline time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②②">unresolved</a> and <var>new start
time</var> is <span id="ref-for-unresolved②③">resolved</span>, make <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time⑧">hold time</a> <span id="ref-for-unresolved②④">unresolved</span>.</p>
     <p class="note" role="note"> This preserves the invariant that when we don’t have an active timeline it
  is only possible to set <em>either</em> the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⓪">start time</a> <em>or</em> the animation’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time①①">current time</a>. </p>
    <li data-md>
     <p>Let <var>previous current time</var> be <var>animation</var>’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time①②">current
time</a>.</p>
     <p class="note" role="note"><span>Note:</span> This is the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time①③">current time</a> after applying the changes from the
previous step which may cause the <span id="ref-for-current-time①④">current time</span> to become <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑤">unresolved</a>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate②">Apply any pending playback rate</a> on <var>animation</var>.</p>
    <li data-md>
     <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①①">start time</a> to <var>new start time</var>.</p>
    <li data-md>
     <p>Update <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time⑨">hold time</a> based on the first matching
condition from the following,</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>new start time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑥">resolved</a>,
       <dd data-md>
        <p>If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑤">playback rate</a> is not zero,
make <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⓪">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑦">unresolved</a>.</p>
       <dt data-md>Otherwise (<var>new start time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑧">unresolved</a>),
       <dd data-md>
        <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①①">hold time</a> to <var>previous current
time</var> even if <var>previous current time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved②⑨">unresolved</a>.</p>
      </dl>
     </div>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task③">pending play task</a> or
a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑤">pending pause task</a>, cancel that task and <a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve①">resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise③">current ready promise</a> with <var>animation</var>.</p>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state④">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to true, and
the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.7" id="waiting-for-the-associated-effect"><span class="secno">4.4.7. </span><span class="content">Waiting for the associated effect</span><span id="waiting-for-the-target-effect"></span><a class="self-link" href="#waiting-for-the-associated-effect"></a></h4>
   <div class="informative-bg">
    <p><em>This section is non-normative</em></p>
    <p>Some operations performed by an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①④">animation</a> may not occur
instantaneously.
For example, some user agents may delegate the playback of an
animation to a separate process or to specialized graphics hardware
each of which may incur some setup overhead.</p>
    <p>If such an animation is timed from the moment when the animation was
triggered there may be a significant jump between the first and second
frames of the animation corresponding to the setup time involved.</p>
    <p>To avoid this problem, Web Animations typically begins timing
animations from the moment when the first frame of the animation is
complete.
This is represented by an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⓪">unresolved</a> <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①②">start time</a> on the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑤">animation</a> which becomes
resolved when the animation is <a data-link-type="dfn" href="#ready" id="ref-for-ready②">ready</a>.
Content may opt out of this behavior by setting the <span id="ref-for-start-time①③">start time</span> to a <span id="ref-for-unresolved③①">resolved</span> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⓪">time value</a>.</p>
   </div>
   <p>An animation is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ready">ready</dfn> at the first moment where <em>both</em> of the
following conditions are true:</p>
   <ul>
    <li data-md>
     <p>the user agent has completed any setup required to begin the playback of
the animation’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect⑦">associated effect</a> including rendering the first frame of any <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect">keyframe
effect</a>.</p>
    <li data-md>
     <p>the animation is associated with a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⓪">timeline</a> that is not <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline⑨">inactive</a>.</p>
   </ul>
   <h4 class="heading settled" data-level="4.4.8" id="the-current-ready-promise"><span class="secno">4.4.8. </span><span class="content">The current ready promise</span><a class="self-link" href="#the-current-ready-promise"></a></h4>
   <p>Each <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑥">animation</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-ready-promise">current ready promise</dfn>.
The <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise④">current ready promise</a> is initially a resolved <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects">Promise</a> created
using the procedure to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-promise-resolved-with" id="ref-for-a-promise-resolved-with①">create a new resolved Promise</a> with the animation
itself as its value and created in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm①">relevant Realm</a> of the animation.</p>
   <p>The object is replaced with a new <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects①">Promise object</a> every time the animation
queues a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task④">pending play task</a> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑥">pending pause task</a> when it
previously did not have a pending task, or when the animation is canceled (see <a href="#canceling-an-animation-section">§ 4.4.15 Canceling an animation</a>).</p>
   <div class="note" role="note">
    <p>Note that since the same object is used for both pending play and
    pending pause requests, authors are advised to check the state of the
    animation when the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects②">Promise object</a> is resolved.</p>
    <p>For example, in the following code fragment, the state of the animation
    will be <a data-link-type="dfn" href="#running-play-state" id="ref-for-running-play-state">running</a> when the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑤">current ready promise</a> is resolved.
    This is because the <code>play</code> operation occurs while a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑤">pending
    play task</a> is still queued and hence the <span id="ref-for-current-ready-promise⑥">current ready promise</span> is re-used.</p>
    <div class="example" id="example-eb69e98f">
     <a class="self-link" href="#example-eb69e98f"></a>
<pre class="lang-javascript highlight">animation<c- p>.</c->pause<c- p>();</c->
animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
  <c- c1>// Displays 'running'</c->
  alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c->
<c- p>});</c->
animation<c- p>.</c->play<c- p>();</c-></pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="4.4.9" id="playing-an-animation-section"><span class="secno">4.4.9. </span><span class="content">Playing an animation</span><a class="self-link" href="#playing-an-animation-section"></a></h4>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="play-an-animation">play an animation</dfn>, <var>animation</var>, given
a flag <var>auto-rewind</var>, is as follows:</p>
   <p class="note" role="note"><span>Note:</span> The <var>auto-rewind</var> flag is provided for other specifications
that build on this model but do not require the rewinding behavior, such
as CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>.</p>
   <ol>
    <li data-md>
     <p>Let <var>aborted pause</var> be a boolean flag that is true if <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑦">pending pause task</a>, and false otherwise.</p>
    <li data-md>
     <p>Let <var>has pending ready promise</var> be a boolean flag that is
initially false.</p>
    <li data-md>
     <p>Perform the steps corresponding to the <em>first</em> matching
condition from the following, if any:</p>
     <div class="switch">
      <dl>
       <dt data-md>
        <p>If <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate">effective playback rate</a> > 0,
the <var>auto-rewind</var> flag is true and <em>either</em> <var>animation</var>’s:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⑤">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③②">unresolved</a>, or</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⑥">current time</a> &lt; zero, or</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⑦">current time</a> ≥ <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end">associated effect end</a>,</p>
        </ul>
       <dd data-md>
        <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①②">hold time</a> to zero.</p>
       <dt data-md>
        <p>If <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate①">effective playback rate</a> &lt; 0,
the <var>auto-rewind</var> flag is true and <em>either</em> <var>animation</var>’s:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⑧">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③③">unresolved</a>, or</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time①⑨">current time</a> ≤ zero, or</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#current-time" id="ref-for-current-time②⓪">current time</a> > <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①">associated effect end</a>,</p>
        </ul>
       <dd data-md>
        <p>If <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end②">associated effect end</a> is positive infinity, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and
abort these steps.
Otherwise, set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①③">hold time</a> to <span id="ref-for-associated-effect-end③">associated
effect end</span>.</p>
       <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate②">effective playback rate</a> = 0 and <var>animation</var>’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②①">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③④">unresolved</a>,
       <dd data-md>
        <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①④">hold time</a> to zero.</p>
      </dl>
     </div>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑥">pending play task</a> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑧">pending pause task</a>,</p>
     <ol>
      <li data-md>
       <p>Cancel that task.</p>
      <li data-md>
       <p>Set <var>has pending ready promise</var> to true.</p>
     </ol>
    <li data-md>
     <p>If the following three conditions are <em>all</em> satisfied:</p>
     <ul>
      <li data-md>
       <p><var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⑤">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑤">unresolved</a>, and</p>
      <li data-md>
       <p><var>aborted pause</var> is false, and</p>
      <li data-md>
       <p><var>animation</var> does <em>not</em> have a <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate">pending playback rate</a>,</p>
     </ul>
     <p>abort this procedure.</p>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⑥">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑥">resolved</a>,
let its <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①④">start time</a> be <span id="ref-for-unresolved③⑦">unresolved</span>.</p>
    <li data-md>
     <p>If <var>has pending ready promise</var> is false,
let <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑦">current ready promise</a> be <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm②">relevant Realm</a> of <var>animation</var>.</p>
    <li data-md>
     <p>Schedule a task to run as soon as <var>animation</var> is <a data-link-type="dfn" href="#ready" id="ref-for-ready③">ready</a>.
The task shall perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Assert that at least one of <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⑤">start time</a> or <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⑦">hold
time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑧">resolved</a>.</p>
      <li data-md>
       <p>Let <var>ready time</var> be the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②①">time value</a> of
the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③①">timeline</a> associated with <var>animation</var> at the moment
when <var>animation</var> became <a data-link-type="dfn" href="#ready" id="ref-for-ready④">ready</a>.</p>
      <li data-md>
       <p>Perform the steps corresponding to the first matching condition below,
if any:</p>
       <div class="switch">
        <dl>
         <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⑧">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved③⑨">resolved</a>,
         <dd data-md>
          <ol>
           <li data-md>
            <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate③">Apply any pending playback rate</a> on <var>animation</var>.</p>
           <li data-md>
            <p>Let <var>new start time</var> be the result of evaluating <code><var>ready time</var> - <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time①⑨">hold time</a> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑥">playback rate</a></code> for <var>animation</var>.
If the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑦">playback rate</a> is zero, let <var>new start time</var> be simply <var>ready time</var>.</p>
           <li data-md>
            <p>Set the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⑥">start time</a> of <var>animation</var> to <var>new start time</var>.</p>
           <li data-md>
            <p>If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑧">playback rate</a> is not 0, make <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②⓪">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⓪">unresolved</a>.</p>
          </ol>
         <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⑦">start time</a> is resolved and <var>animation</var> has
a <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①">pending playback rate</a>,
         <dd data-md>
          <ol>
           <li data-md>
            <p>Let <var>current time to match</var> be the result of evaluating <code>(<var>ready time</var> - <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⑧">start time</a>) × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate⑨">playback rate</a></code> for <var>animation</var>.</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate④">Apply any pending playback rate</a> on <var>animation</var>.</p>
           <li data-md>
            <p>If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⓪">playback rate</a> is zero, let <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②①">hold time</a> be <var>current time to match</var>.</p>
           <li data-md>
            <p>Let <var>new start time</var> be the result of evaluating <code><var>ready time</var> - <var>current time to match</var> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①①">playback rate</a></code> for <var>animation</var>.
If the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①②">playback rate</a> is zero, let <var>new start time</var> be simply <var>ready time</var>.</p>
           <li data-md>
            <p>Set the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time①⑨">start time</a> of <var>animation</var> to <var>new start time</var>.</p>
          </ol>
        </dl>
       </div>
      <li data-md>
       <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve②">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑧">current
ready promise</a> with <var>animation</var>.</p>
      <li data-md>
       <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑤">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false,
and the <var>synchronously notify</var> flag set to false.</p>
       <div class="note" role="note"> Note that the order of the above two steps is important
    since it means that an animation with zero-length <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect⑧">associated
    effect</a> will resolve its <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise⑨">current ready promise</a> before its <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise">current finished promise</a>. </div>
     </ol>
     <p>So long as the above task is scheduled but has yet to run, <var>animation</var> is described as having a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-play-task">pending play task</dfn>.
While the task is running, however, <var>animation</var> does <em>not</em> have
a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑦">pending play task</a>.</p>
     <p>If a user agent determines that <var>animation</var> is immediately <a data-link-type="dfn" href="#ready" id="ref-for-ready⑤">ready</a>, it
may schedule the above task as a microtask such that it runs at the next <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint①">microtask checkpoint</a>, but it must <em>not</em> perform the task synchronously.</p>
     <div class="note" role="note">
      <p>The above requirement to run the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑧">pending play task</a> asynchronously
ensures that code such as the following behaves consistently between
implementations:</p>
      <div class="example" id="example-b6f05729">
       <a class="self-link" href="#example-b6f05729"></a>
<pre class="lang-javascript highlight">animation<c- p>.</c->play<c- p>();</c->
animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c->
  <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- t>'Playback commenced'</c-><c- p>);</c-> <c- p>},</c->
  <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- t>'Playback was canceled'</c-><c- p>);</c-> <c- p>}</c->
<c- p>);</c->
<c- c1>// Suppose some condition requires playback to be canceled...</c->
animation<c- p>.</c->cancel<c- p>();</c->
<c- c1>// "Playback was canceled" will be printed to the console.</c->
</pre>
      </div>
      <p>In the above code, were the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task⑨">pending play task</a> run synchronously, the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⓪">current ready promise</a> would not be rejected.</p>
     </div>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑥">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false, and
the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.10" id="pausing-an-animation-section"><span class="secno">4.4.10. </span><span class="content">Pausing an animation</span><a class="self-link" href="#pausing-an-animation-section"></a></h4>
   <p>Whenever an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑦">animation</a> has an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④①">unresolved</a> <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②⓪">start time</a>,
its <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②②">current time</a> will be suspended.</p>
   <p>As with <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation">playing an animation</a>, pausing may not
happen instantaneously (see <a href="#waiting-for-the-associated-effect">§ 4.4.7 Waiting for the associated effect</a>).
For example, if animation is performed by a separate process, it may
be necessary to synchronize the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②③">current time</a> to ensure that it
reflects the state drawn by the animation process.</p>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pause-an-animation">pause an animation</dfn>, <var>animation</var>, is as
follows:</p>
   <ol>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task⑨">pending pause task</a>, abort these steps.</p>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#play-state" id="ref-for-play-state">play state</a> of <var>animation</var> is <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state">paused</a>, abort these steps.</p>
    <li data-md>
     <p>If the <var>animation</var>’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②④">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④②">unresolved</a>,
perform the steps according to the first matching condition from below:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①③">playback rate</a> is ≥ 0,
       <dd data-md>
        <p>Let <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②②">hold time</a> be zero.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>If <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end④">associated effect end</a> for <var>animation</var> is positive
 infinity, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> and abort these steps.
 Otherwise, let <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②③">hold time</a> be <span id="ref-for-associated-effect-end⑤">associated effect end</span>.</p>
      </dl>
     </div>
    <li data-md>
     <p>Let <var>has pending ready promise</var> be a boolean flag that is
initially false.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⓪">pending play task</a>, cancel that task
and let <var>has pending ready promise</var> be true.</p>
    <li data-md>
     <p>If <var>has pending ready promise</var> is false,
set <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①①">current ready promise</a> to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-new-promise" id="ref-for-a-new-promise①">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm③">relevant Realm</a> of <var>animation</var>.</p>
    <li data-md>
     <p>Schedule a task to be executed at the first possible moment after
the user agent has performed any processing necessary to suspend
the playback of <var>animation</var>’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect⑨">associated effect</a>, if any.
The task shall perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Let <var>ready time</var> be the time value of the timeline associated
with <var>animation</var> at the moment when the user agent completed
processing necessary to suspend playback of <var>animation</var>’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①⓪">associated effect</a>.</p>
      <li data-md>
       <p>If <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②①">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④③">resolved</a> and its <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②④">hold time</a> is <em>not</em> resolved,
let <var>animation</var>’s <span id="ref-for-hold-time②⑤">hold time</span> be the result of evaluating <code>(<var>ready time</var> - <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②②">start time</a>) × <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①④">playback rate</a></code>.</p>
       <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②⑥">hold time</a> might be already set if the animation
is <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①">finished</a>, or if the animation
has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①①">pending play task</a>.
In either case we want to preserve the <span id="ref-for-hold-time②⑦">hold time</span> as we
enter the <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state①">paused</a> state.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate⑤">Apply any pending playback rate</a> on <var>animation</var>.</p>
      <li data-md>
       <p>Make <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②③">start time</a> unresolved.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve③">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①②">current
ready promise</a> with <var>animation</var>.</p>
      <li data-md>
       <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑦">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false,
and the <var>synchronously notify</var> flag set to false.</p>
     </ol>
     <p>So long as the above task is scheduled but has yet to run, <var>animation</var> is described as having a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-pause-task">pending pause task</dfn>.
While the task is running, however, <var>animation</var> does <em>not</em> have a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⓪">pending pause task</a>.</p>
     <p>As with the <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①②">pending play task</a>, the user agent must run the <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①①">pending
pause task</a> asynchronously, although that may be as soon as the next <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint②">microtask checkpoint</a>.</p>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑧">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false,
and the <var>synchronously notify</var> flag set to false.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.11" id="reaching-the-end"><span class="secno">4.4.11. </span><span class="content">Reaching the end</span><a class="self-link" href="#reaching-the-end"></a></h4>
   <div class="informative-bg">
    <p><em>This section is non-normative</em></p>
    <p>DVD players or cassette players typically continue playing until they reach
the end of their media at which point they stop.
If such players are able to play in reverse, they typically stop
playing when they reach the beginning of their media.
In order to emulate this behavior and to provide consistency
with HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element" id="ref-for-media-element">media elements</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a>, the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②⑤">current time</a> of Web
Animations' animations do not play forwards beyond the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time">end time</a> of their <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①①">associated effect</a> or play backwards past time zero.</p>
    <p>An animation that has reached the natural boundary of its playback range
is said to have <em>finished</em>.</p>
    <p>Graphically, the effect of limiting the current time is shown below.</p>
    <figure>
      <img alt="The effect of limiting the current time of an animation." src="img/limiting.svg" width="500"> 
     <figcaption> The effect of limiting the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②⑥">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑧">animation</a> with a start time of 1s, an <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①②">associated effect</a> of length 3s, and
    a positive <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑤">playback rate</a>.
    After the <span id="ref-for-current-time②⑦">current time</span> of the animation reaches the end of the
    associated effect, it is capped at 3s. </figcaption>
    </figure>
    <p>It is possible, however, to <em>seek</em> the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time②⑧">current time</a> of
an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation①⑨">animation</a> to a time past the end of the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①③">associated effect</a>.
When doing so, the <span id="ref-for-current-time②⑨">current time</span> will not progress but the
animation will act as if it had been paused at the seeked time.</p>
    <p>This allows, for example, seeking the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③⓪">current time</a> of
an animation with <em>no</em> <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①④">associated effect</a> to 5s.
If <span id="ref-for-associated-effect①⑤">associated effect</span> with an <a data-link-type="dfn" href="#end-time" id="ref-for-end-time①">end time</a> later than 5s is
later associated with the animation, playback will begin from the 5s
mark.</p>
    <p>Similar behavior to the above scenario may arise when the
length of an animation’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①⑥">associated effect</a> changes.</p>
    <p>Similarly, when the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑥">playback rate</a> is negative, the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③①">current time</a> does not progress past time zero.</p>
   </div>
   <h4 class="heading settled" data-level="4.4.12" id="the-current-finished-promise"><span class="secno">4.4.12. </span><span class="content">The current finished promise</span><a class="self-link" href="#the-current-finished-promise"></a></h4>
   <p>Each animation has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-finished-promise">current finished promise</dfn>.
The <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①">current finished promise</a> is initially a pending <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects③">Promise</a> object.</p>
   <p>The object is replaced with a new <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects" id="ref-for-sec-promise-objects④">promise</a> every time
the animation leaves the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state②">finished play state</a>.</p>
   <h4 class="heading settled" data-level="4.4.13" id="updating-the-finished-state"><span class="secno">4.4.13. </span><span class="content">Updating the finished state</span><a class="self-link" href="#updating-the-finished-state"></a></h4>
   <p>For an animation with a positive <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑦">playback rate</a>, the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③②">current time</a> continues to increase until it reaches the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑥">associated effect end</a>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-effect-end">associated effect end</dfn> of an animation is equal to the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time②">end
time</a> of the animation’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①⑦">associated effect</a>.
If the animation has no <span id="ref-for-associated-effect①⑧">associated effect</span>, the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑦">associated effect
end</a> is zero.</p>
   <p>For an animation with a negative <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑧">playback rate</a>, the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③③">current time</a> continues to decrease until it reaches zero.</p>
   <p>A running animation that has reached this boundary (or overshot it) and has a <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④④">resolved</a> <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②④">start time</a> is said to be <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state③">finished</a>.</p>
   <p>The crossing of this boundary is checked on each modification to the
animation object using the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state⑨">update an animation’s finished
state</a> defined below. This procedure is also run as part of the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events②">update
animations and send events</a> procedure. In both cases the <var>did seek</var> flag, defined below, is set to false.</p>
   <p>For each animation, the user agent maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="previous current time" data-noexport id="previous-current-time">previous current
time</dfn> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②②">time value</a> that is originally <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑤">unresolved</a>.</p>
   <p>Whilst during normal playback the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③④">current time</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⓪">animation</a> is
limited to the boundaries described above, it is possible to seek the <span id="ref-for-current-time③⑤">current
time</span> of an <span id="ref-for-concept-animation②①">animation</span> to times outside those boundaries using the
procedure to <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time">set the current time</a> of an <span id="ref-for-concept-animation②②">animation</span>.</p>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-an-animations-finished-state">update an animation’s finished state</dfn> for <var>animation</var>, given a flag <var>did seek</var> (to indicate if
the update is being performed after <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time①">setting the
current time</a>), and a flag <var>synchronously notify</var> (to indicate
the update was called in a context where we expect finished event queueing
and finished promise resolution to happen immediately, if at all) is as
follows:</p>
   <ol>
    <li data-md>
     <p>Let the <var>unconstrained current time</var> be the result of calculating
the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③⑥">current time</a> substituting an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑥">unresolved</a> time value for the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②⑧">hold time</a> if <var>did seek</var> is false.
If <var>did seek</var> is true, the <var>unconstrained current time</var> is equal to the <span id="ref-for-current-time③⑦">current time</span>.</p>
     <p class="note" role="note"><span>Note:</span> This is required to accommodate timelines that may change direction.
Without this definition, a once-finished animation would remain finished
even when its timeline progresses in the opposite direction.</p>
    <li data-md>
     <p>If <em>all three</em> of the following conditions are true,</p>
     <ul>
      <li data-md>
       <p>the <var>unconstrained current time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑦">resolved</a>, <em>and</em></p>
      <li data-md>
       <p><var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②⑤">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑧">resolved</a>, <em>and</em></p>
      <li data-md>
       <p><var>animation</var> does <em>not</em> have a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①③">pending play task</a> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①②">pending pause task</a>,</p>
     </ul>
     <p>then update <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time②⑨">hold time</a> based on the first
matching condition for <var>animation</var> from below, if any:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①⑨">playback rate</a> > 0 and <var>unconstrained current time</var> is greater than or equal to <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑧">associated effect end</a>,
       <dd data-md>
        <p>If <var>did seek</var> is true, let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③⓪">hold time</a> be the value of <var>unconstrained current time</var>.</p>
        <p>If <var>did seek</var> is false, let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③①">hold time</a> be the maximum
value of <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time③">previous current time</a> and <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end⑨">associated effect end</a>.
If the <span id="ref-for-previous-current-time④">previous current time</span> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved④⑨">unresolved</a>, let the <span id="ref-for-hold-time③②">hold time</span> be <span id="ref-for-associated-effect-end①⓪">associated
effect end</span>.</p>
       <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⓪">playback rate</a> &lt; 0 and <var>unconstrained current time</var> is less than or equal to 0,
       <dd data-md>
        <p>If <var>did seek</var> is true, let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③③">hold time</a> be the value of <var>unconstrained current time</var>.</p>
        <p>If <var>did seek</var> is false, let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③④">hold time</a> be the
minimum value of <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time⑤">previous current time</a> and zero.
If the <span id="ref-for-previous-current-time⑥">previous current time</span> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⓪">unresolved</a>, let the <span id="ref-for-hold-time③⑤">hold time</span> be zero.</p>
       <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②①">playback rate</a> ≠ 0, and <var>animation</var> is associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⓪">active timeline</a>,
       <dd data-md>
        <p>Perform the following steps:</p>
        <ol>
         <li data-md>
          <p>If <var>did seek</var> is true and the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③⑥">hold time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤①">resolved</a>, let <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②⑥">start time</a> be equal to the result of evaluating <code><var>timeline time</var> - (<a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③⑦">hold time</a> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②②">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②③">time value</a> of <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③②">timeline</a> associated with <var>animation</var>.</p>
         <li data-md>
          <p>Let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③⑧">hold time</a> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤②">unresolved</a>.</p>
        </ol>
      </dl>
     </div>
    <li data-md>
     <p>Set the <a data-link-type="dfn" href="#previous-current-time" id="ref-for-previous-current-time⑦">previous current time</a> of <var>animation</var> be the
result of calculating its <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③⑧">current time</a>.</p>
    <li data-md>
     <p>Let <var>current finished state</var> be true if the <a data-link-type="dfn" href="#play-state" id="ref-for-play-state①">play
state</a> of <var>animation</var> is <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state④">finished</a>.
Otherwise, let it be false.</p>
    <li data-md>
     <p>If <var>current finished state</var> is true and the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise②">current finished
promise</a> is not yet resolved, perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="finish-notification-steps">finish notification steps</dfn> refer to the following
procedure:</p>
       <ol>
        <li data-md>
         <p>If <var>animation</var>’s <a data-link-type="dfn" href="#play-state" id="ref-for-play-state②">play state</a> is not equal to <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state⑤">finished</a>, abort these steps.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve④">Resolve</a> <var>animation</var>’s <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise③">current finished promise</a> object with <var>animation</var>.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent">AnimationPlaybackEvent</a></code>, <var>finishEvent</var>.</p>
        <li data-md>
         <p>Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type">type</a></code> attribute to <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event">finish</a>.</p>
        <li data-md>
         <p>Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime">currentTime</a></code> attribute
to the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time③⑨">current time</a> of <var>animation</var>.</p>
        <li data-md>
         <p>Set <var>finishEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime">timelineTime</a></code> attribute to the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑤">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③③">timeline</a> with which <var>animation</var> is associated.
If <var>animation</var> is not associated with a timeline, or the timeline
is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①①">inactive</a>, let <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime①">timelineTime</a></code> be <code class="esvalue">null</code>.</p>
        <li data-md>
         <p>If <var>animation</var> has a <a data-link-type="dfn" href="#document-for-timing" id="ref-for-document-for-timing①">document for timing</a>, then append <var>finishEvent</var> to its <span id="ref-for-document-for-timing②">document for timing</span>'s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue②">pending animation
event queue</a> along with its target, <var>animation</var>.
For the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time②">scheduled event time</a>, use the result of <a data-link-type="dfn" href="#animation-time-to-origin-relative-time" id="ref-for-animation-time-to-origin-relative-time">converting</a> <var>animation</var>’s <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①①">associated effect end</a> to an origin-relative time.</p>
         <p>Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch①">dispatch</a> <var>finishEvent</var> at <var>animation</var>.
The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source">DOM manipulation task
source</a>.</p>
       </ol>
      <li data-md>
       <p>If <var>synchronously notify</var> is true, cancel any queued
microtask to run the <a data-link-type="dfn" href="#finish-notification-steps" id="ref-for-finish-notification-steps">finish notification steps</a> for this <var>animation</var>, and run the <span id="ref-for-finish-notification-steps①">finish notification
steps</span> immediately.</p>
       <p>Otherwise, if <var>synchronously notify</var> is false, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask" id="ref-for-queue-a-microtask">queue
a microtask</a> to run <a data-link-type="dfn" href="#finish-notification-steps" id="ref-for-finish-notification-steps②">finish notification steps</a> for <var>animation</var> unless there is already a microtask queued to run
those steps for <var>animation</var>.</p>
     </ol>
    <li data-md>
     <p>If <var>current finished state</var> is false and <var>animation</var>’s <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise④">current finished promise</a> is already
resolved, set <var>animation</var>’s <span id="ref-for-current-finished-promise⑤">current finished promise</span> to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-new-promise" id="ref-for-a-new-promise②">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm④">relevant Realm</a> of <var>animation</var>.</p>
   </ol>
   <div class="informative-bg">
    <p>Typically, notification about the finished state of an animation is
performed asynchronously. This allows for the animation to temporarily
enter the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state⑥">finished state</a> without
triggering events to be fired or promises to be resolved.</p>
    <p>For example, in the following code fragment, <code>animation</code> temporarily
enters the finished state. If notification of the finished state occurred
synchronously this code would cause the <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event①">finish event</a> to be queued
and the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑥">current finished promise</a> to be resolved. However, if we
reverse the order of the two statements such that the <code>iterationCount</code> is updated first, this would not happen.
To avoid this surprising behavior, notification about the finished state of
an animation is typically performed asynchronously.</p>
    <div class="example" id="example-d166c8ed">
     <a class="self-link" href="#example-d166c8ed"></a>
<pre class="lang-javascript highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->
animation<c- p>.</c->playbackRate <c- o>=</c-> <c- mi>2</c-><c- p>;</c->
animation<c- p>.</c->currentTime <c- o>=</c-> <c- mi>1000</c-><c- p>;</c-> <c- c1>// animation is now finished</c->
animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> iterationCount<c- o>:</c-> <c- mi>2</c-> <c- p>});</c-> <c- c1>// animation is no longer finished</c->
</pre>
    </div>
    <p>The one exception to this asynchronous behavior is when the <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation">finish an
animation</a> procedure is performed (typically by calling the <code class="idl"><a data-link-type="idl" href="#dom-animation-finish" id="ref-for-dom-animation-finish">finish()</a></code> method). In this case the author’s intention to finish
the animation is clear so the notification about the finished state of the
animation occurs synchronously as demonstrated below.</p>
    <div class="example" id="example-3a2cd29f">
     <a class="self-link" href="#example-3a2cd29f"></a>
<pre class="lang-javascript highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
animation<c- p>.</c->finish<c- p>();</c-> <c- c1>// finish event is queued immediately and finished promise</c->
                    <c- c1>// is resolved despite the fact that the following statement</c->
                    <c- c1>// causes the animation to leave the finished state</c->
animation<c- p>.</c->currentTime <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
</pre>
    </div>
    <p>Note that like the procedure to <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation①">finish an animation</a>,
the procedure to <a data-link-type="dfn" href="#cancel-an-animation" id="ref-for-cancel-an-animation①">cancel an animation</a> similarly queues the <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event">cancel event</a> and rejects the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑦">current finished promise</a> and <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①③">current ready promise</a> in a <em>synchronous</em> manner.</p>
   </div>
   <h4 class="heading settled" data-level="4.4.14" id="finishing-an-animation-section"><span class="secno">4.4.14. </span><span class="content">Finishing an animation</span><a class="self-link" href="#finishing-an-animation-section"></a></h4>
   <p>An animation can be advanced to the natural end of its current playback
direction by using the procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="finish-an-animation">finish an animation</dfn> for <var>animation</var> defined below:</p>
   <ol>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate③">effective playback rate</a> is zero,
or if <var>animation</var>’s <span id="ref-for-effective-playback-rate④">effective playback rate</span> > 0
and <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①②">associated effect end</a> is infinity, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code> and
abort these steps.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate⑥">Apply any pending playback rate</a> to <var>animation</var>.</p>
    <li data-md>
     <p>Set <var>limit</var> as follows:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②③">playback rate</a> > 0,
       <p></p>
       <dd data-md>
        <p>Let <var>limit</var> be <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①③">associated effect end</a>.</p>
       <p></p>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Let <var>limit</var> be zero.</p>
       <p></p>
      </dl>
     </div>
    <li data-md>
     <p><a data-link-type="dfn" href="#silently-set-the-current-time" id="ref-for-silently-set-the-current-time②">Silently set the current time</a> to <var>limit</var>.</p>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②⑦">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤③">unresolved</a> and <var>animation</var> has an associated <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①②">active</a> <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③④">timeline</a>, let the <span id="ref-for-start-time②⑧">start time</span> be the result of evaluating <code><var>timeline time</var> -
(<var>limit</var> / <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②④">playback rate</a>)</code> where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②④">time
value</a> of the associated <span id="ref-for-timeline③⑤">timeline</span>.</p>
    <li data-md>
     <p>If there is a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①③">pending pause task</a> and <a data-link-type="dfn" href="#start-time" id="ref-for-start-time②⑨">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤④">resolved</a>,</p>
     <ol>
      <li data-md>
       <p>Let the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time③⑨">hold time</a> be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑤">unresolved</a>.</p>
       <div class="note" role="note">Typically the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time④⓪">hold time</a> will already be
unresolved except in the case when the animation was previously <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state①">idle</a>.</div>
      <li data-md>
       <p>Cancel the <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①④">pending pause task</a>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve⑤">Resolve</a> the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①④">current ready promise</a> of <var>animation</var> with <var>animation</var>.</p>
     </ol>
    <li data-md>
     <p>If there is a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①④">pending play task</a> and <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⓪">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑥">resolved</a>, cancel that task and <a data-link-type="dfn" href="https://heycam.github.io/webidl/#resolve" id="ref-for-resolve⑥">resolve</a> the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⑤">current ready promise</a> of <var>animation</var> with <var>animation</var>.</p>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state①⓪">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to true,
and the <var>synchronously notify</var> flag set to true.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.15" id="canceling-an-animation-section"><span class="secno">4.4.15. </span><span class="content">Canceling an animation</span><a class="self-link" href="#canceling-an-animation-section"></a></h4>
   <p>An animation can be canceled which causes the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⓪">current time</a> to
become <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑦">unresolved</a> hence removing any effects caused by the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect①⑨">associated effect</a>.</p>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="cancel-an-animation">cancel an animation</dfn> for <var>animation</var> is
as follows:</p>
   <ol>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#play-state" id="ref-for-play-state③">play state</a> is <em>not</em> <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state②">idle</a>, perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Run the procedure to <a data-link-type="dfn" href="#reset-an-animations-pending-tasks" id="ref-for-reset-an-animations-pending-tasks">reset an animation’s pending tasks</a> on <var>animation</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#reject" id="ref-for-reject①">Reject</a> the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑧">current finished promise</a> with a DOMException named "AbortError".</p>
      <li data-md>
       <p>Let <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise⑨">current finished promise</a> be <a data-link-type="dfn" href="https://heycam.github.io/webidl/#a-new-promise" id="ref-for-a-new-promise③">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑤">relevant Realm</a> of <var>animation</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create①">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent①">AnimationPlaybackEvent</a></code>, <var>cancelEvent</var>.</p>
      <li data-md>
       <p>Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type①">type</a></code> attribute to <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event①">cancel</a>.</p>
      <li data-md>
       <p>Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime①">currentTime</a></code> to <code class="esvalue">null</code>.</p>
      <li data-md>
       <p>Let <var>timeline time</var> be the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑥">current
time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑥">timeline</a> with which <var>animation</var> is associated.
If <var>animation</var> is not associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①③">active timeline</a>, let <var>timeline time</var> be n <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑧">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑤">time value</a>.</p>
      <li data-md>
       <p>Set <var>cancelEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime②">timelineTime</a></code> to <var>timeline time</var>. If <var>timeline time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑤⑨">unresolved</a>, set it to <code class="esvalue">null</code>.</p>
      <li data-md>
       <p>If <var>animation</var> has a <a data-link-type="dfn" href="#document-for-timing" id="ref-for-document-for-timing③">document for timing</a>, then append <var>cancelEvent</var> to its <span id="ref-for-document-for-timing④">document for timing</span>'s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue③">pending animation
event queue</a> along with its target, <var>animation</var>.
If <var>animation</var> is associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①④">active
timeline</a> that defines a procedure to <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time①">convert timeline times to origin-relative
time</a>, let the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time③">scheduled event time</a> be the result of applying
that procedure to <var>timeline time</var>.
Otherwise, the <span id="ref-for-scheduled-event-time④">scheduled event time</span> is an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⓪">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑥">time
value</a>.</p>
       <p>Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch②">dispatch</a> <var>cancelEvent</var> at <var>animation</var>.
The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source①">DOM manipulation task
source</a>.</p>
     </ol>
    <li data-md>
     <p>Make <var>animation</var>’s <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time④①">hold time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥①">unresolved</a>.</p>
    <li data-md>
     <p>Make <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③①">start time</a> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥②">unresolved</a>.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.16" id="speed-control"><span class="secno">4.4.16. </span><span class="content">Speed control</span><a class="self-link" href="#speed-control"></a></h4>
   <div class="informative-bg">
    <p>The rate of play of an animation can be controlled by setting its <em>playback rate</em>.
For example, setting a playback rate of 2 will cause the animation’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④①">current time</a> to increase at twice the rate of its <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑦">timeline</a>.
Similarly, a playback rate of -1 will cause the animation’s <span id="ref-for-current-time④②">current
time</span> to decrease at the same rate as the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑦">time values</a> from
its <span id="ref-for-timeline③⑧">timeline</span> increase.</p>
   </div>
   <p><a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②③">Animations</a> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="playback-rate">playback rate</dfn> that provides a scaling factor from the rate of change of the associated <a data-link-type="dfn" href="#timeline" id="ref-for-timeline③⑨">timeline</a>’s <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑧">time values</a> to the animation’s <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④③">current time</a>.
The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑤">playback rate</a> is initially 1.</p>
   <p>Setting an animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑥">playback rate</a> to zero effectively pauses the animation (however, the <a data-link-type="dfn" href="#play-state" id="ref-for-play-state④">play state</a> does not necessarily become <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state②">paused</a>).</p>
   <h5 class="heading settled" data-level="4.4.16.1" id="setting-the-playback-rate-of-an-animation"><span class="secno">4.4.16.1. </span><span class="content">Setting the playback rate of an animation</span><a class="self-link" href="#setting-the-playback-rate-of-an-animation"></a></h5>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-the-playback-rate">set the playback rate</dfn> of
an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②④">animation</a>, <var>animation</var> to <var>new playback rate</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>Clear any <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate②">pending playback rate</a> on <var>animation</var>.</p>
    <li data-md>
     <p>Let <var>previous time</var> be the value of the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④④">current time</a> of <var>animation</var> before changing the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑦">playback rate</a>.</p>
    <li data-md>
     <p>Set the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑧">playback rate</a> to <var>new playback rate</var>.</p>
    <li data-md>
     <p>If <var>previous time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥③">resolved</a>, <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time②">set the current time</a> of <var>animation</var> to <var>previous time</var></p>
   </ol>
   <h5 class="heading settled" data-level="4.4.16.2" id="seamlessly-updating-the-playback-rate-of-an-animation"><span class="secno">4.4.16.2. </span><span class="content">Seamlessly updating the playback rate of an animation</span><a class="self-link" href="#seamlessly-updating-the-playback-rate-of-an-animation"></a></h5>
   <p>For an in-flight animation that is running on another process or thread, the
procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate①">set the playback rate</a> may cause the animation to jump if the
process or thread running the animation is not currently synchronized with the
process or thread performing the update.</p>
   <p>In order to produce seamless changes to the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate②⑨">playback rate</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑤">animation</a>, animation’s may have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-playback-rate">pending playback rate</dfn> that
defines a playback rate to be applied after any necessary synchronization has
taken place (for the case of animations running in a different thread or
process).</p>
   <p>Initially the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate③">pending playback rate</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑥">animation</a> is unset.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effective-playback-rate">effective playback rate</dfn> of an <var>animation</var> is
its <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate④">pending playback rate</a>, if set,
otherwise it is the animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⓪">playback rate</a>.</p>
   <p>When an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑦">animation</a>, <var>animation</var>, is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="apply any pending playback rate" data-noexport id="apply-any-pending-playback-rate">apply any pending playback
rate</dfn> the following steps are performed:</p>
   <ol>
    <li data-md>
     <p>If <var>animation</var> does not have a <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑤">pending playback rate</a>, abort these steps.</p>
    <li data-md>
     <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③①">playback rate</a> to its <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑥">pending playback rate</a>.</p>
    <li data-md>
     <p>Clear <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑦">pending playback rate</a>.</p>
   </ol>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="seamlessly-update-the-playback-rate">seamlessly update the playback rate</dfn> an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑧">animation</a>, <var>animation</var>, to <var>new playback rate</var> preserving its <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⑤">current
time</a> is as follows:</p>
   <ol>
    <li data-md>
     <p>Let <var>previous play state</var> be <var>animation</var>’s <a data-link-type="dfn" href="#play-state" id="ref-for-play-state⑤">play state</a>.</p>
     <p class="note" role="note"><span>Note:</span> It is necessary to record the play state
before updating <var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑤">effective playback rate</a> since,
in the following logic,
we want to immediately apply the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate⑧">pending playback rate</a> of <var>animation</var> if it is <em>currently</em> <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state⑦">finished</a> regardless of whether or not it will still be finished after we
apply the <span id="ref-for-pending-playback-rate⑨">pending playback rate</span>.</p>
    <li data-md>
     <p>Let <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⓪">pending playback rate</a> be <var>new playback rate</var>.</p>
    <li data-md>
     <p>Perform the steps corresponding to the first matching condition from below:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>animation</var> has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⑤">pending play task</a> or a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⑤">pending pause task</a>,
       <dd data-md>
        <p>Abort these steps.</p>
        <p class="note" role="note"><span>Note:</span> The different types of pending tasks will apply the <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①①">pending
playback rate</a> when they run so there is no further action required in
this case.</p>
       <dt data-md>If <var>previous play state</var> is <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state③">idle</a> or <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state③">paused</a>,
       <dd data-md>
        <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate⑦">Apply any pending playback rate</a> on <var>animation</var>.</p>
       <dt data-md>If <var>previous play state</var> is <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state⑧">finished</a>,
       <dd data-md>
        <ol>
         <li data-md>
          <p>Let the <var>unconstrained current time</var> be the result of calculating
the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⑥">current time</a> of <var>animation</var> substituting an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥④">unresolved</a> time value for the <a data-link-type="dfn" href="#hold-time" id="ref-for-hold-time④②">hold time</a>.</p>
         <li data-md>
          <p>Let <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③②">start time</a> be
the result of evaluating the following expression:</p>
          <blockquote> <code><var>timeline time</var> - (<var>unconstrained current time</var> / <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①②">pending playback rate</a>)</code> </blockquote>
          <p>Where <var>timeline time</var> is the current <a data-link-type="dfn" href="#time-value" id="ref-for-time-value②⑨">time value</a> of
the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⓪">timeline</a> associated with <var>animation</var>.</p>
          <p>If <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①③">pending playback rate</a> is zero, let <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③③">start time</a> be <var>timeline time</var>.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#apply-any-pending-playback-rate" id="ref-for-apply-any-pending-playback-rate⑧">Apply any pending playback rate</a> on <var>animation</var>.</p>
         <li data-md>
          <p>Run the procedure to <a data-link-type="dfn" href="#update-an-animations-finished-state" id="ref-for-update-an-animations-finished-state①①">update an animation’s finished state</a> for <var>animation</var> with the <var>did seek</var> flag set to false,
and the <var>synchronously notify</var> flag set to false.</p>
        </ol>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation①">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to false.</p>
      </dl>
     </div>
   </ol>
   <h4 class="heading settled" data-level="4.4.17" id="reversing-an-animation-section"><span class="secno">4.4.17. </span><span class="content">Reversing an animation</span><a class="self-link" href="#reversing-an-animation-section"></a></h4>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="reverse-an-animation">reverse an animation</dfn> of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation②⑨">animation</a> <var>animation</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>If there is no <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④①">timeline</a> associated with <var>animation</var>, or the
associated <span id="ref-for-timeline④②">timeline</span> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⑤">inactive</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror③">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code> and
abort these steps.</p>
    <li data-md>
     <p>Let <var>original pending playback rate</var> be <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①④">pending playback
rate</a>.</p>
    <li data-md>
     <p>Let <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⑤">pending playback rate</a> be the additive inverse of
its <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑥">effective playback rate</a> (i.e. <code>-<a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑦">effective playback rate</a></code>).</p>
    <li data-md>
     <p>Run the steps to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation②">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to true.</p>
     <p>If the steps to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation③">play an animation</a> throw an exception, set <var>animation</var>’s <a data-link-type="dfn" href="#pending-playback-rate" id="ref-for-pending-playback-rate①⑥">pending playback rate</a> to <var>original pending playback rate</var> and propagate the exception.</p>
   </ol>
   <h4 class="heading settled" data-level="4.4.18" id="play-states"><span class="secno">4.4.18. </span><span class="content">Play states</span><a class="self-link" href="#play-states"></a></h4>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⓪">animation</a> may be described as being in one of the following <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="play state" data-noexport id="play-state">play states</dfn> for each of which, a 
non-normative description is also provided:</p>
   <div class="informative-bg">
    <dl>
     <dt data-md><a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state④">idle</a>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⑦">current time</a> of the animation is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑤">unresolved</a> and
there are no pending tasks.
In this state the animation has no effect.</p>
     <dt data-md><a data-link-type="dfn" href="#running-play-state" id="ref-for-running-play-state①">running</a>
     <dd data-md>
      <p>The animation has a resolved <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⑧">current time</a> that changes on each <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame②">animation frame</a> (provided the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③②">playback rate</a> is not zero).</p>
     <dt data-md><a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state④">paused</a>
     <dd data-md>
      <p>The animation has been suspended and the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time④⑨">current time</a> is no longer changing.</p>
     <dt data-md><a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state⑨">finished</a>
     <dd data-md>
      <p>The animation has reached the natural boundary of its playback range
and the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤⓪">current time</a> is no longer updating.</p>
    </dl>
   </div>
   <p>The <a data-link-type="dfn" href="#play-state" id="ref-for-play-state⑥">play state</a> of <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③①">animation</a>, <var>animation</var>, at a given
moment is the state corresponding to the <em>first</em> matching
condition from the following:</p>
   <div class="switch">
    <dl>
     <dt data-md>
      <p><em>All</em> of the following conditions are true:</p>
      <ul>
       <li data-md>
        <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤①">current time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑥">unresolved</a>, <em>and</em></p>
       <li data-md>
        <p><var>animation</var> does <em>not</em> have <em>either</em> a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⑥">pending play task</a> <em>or</em> a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⑥">pending pause task</a>,</p>
      </ul>
     <dd data-md>
      <p>→ <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="idle play state" data-noexport id="idle-play-state">idle</dfn></p>
     <dt data-md>
      <p><em>Either</em> of the following conditions are true:</p>
      <ul>
       <li data-md>
        <p><var>animation</var> has a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⑦">pending pause task</a>, <em>or</em></p>
       <li data-md>
        <p><em>both</em> the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③④">start time</a> of <var>animation</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑦">unresolved</a> <em>and</em> it does <em>not</em> have a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⑦">pending play task</a>,</p>
      </ul>
     <dd data-md>
      <p>→ <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="paused play state" data-noexport id="paused-play-state">paused</dfn></p>
     <dt data-md>
      <p>For <var>animation</var>, <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤②">current time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑧">resolved</a> and <em>either</em> of the following conditions
are true:</p>
      <ul>
       <li data-md>
        <p><var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑧">effective playback rate</a> > 0 and <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤③">current time</a> ≥ <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①④">associated effect end</a>; <em>or</em></p>
       <li data-md>
        <p><var>animation</var>’s <a data-link-type="dfn" href="#effective-playback-rate" id="ref-for-effective-playback-rate⑨">effective playback rate</a> &lt; 0 and <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤④">current time</a> ≤ 0,</p>
      </ul>
     <dd data-md>
      <p>→ <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="finished play state" data-noexport id="finished-play-state">finished</dfn></p>
     <dt data-md>Otherwise,
     <dd data-md>
      <p>→ <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="running play state" data-noexport id="running-play-state">running</dfn></p>
    </dl>
   </div>
   <div class="note" role="note">
    <p>Note that the <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state⑤">paused play state</a> effectively
“wins” over the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①⓪">finished play state</a>.</p>
    <p>However, an animation that is paused outside of its natural playback range can
be converted from a <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state⑥">paused</a> animation into a <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①①">finished</a> animation
without restarting by setting the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⑤">start time</a> such as below:</p>
    <div class="example" id="example-e0f669c8">
     <a class="self-link" href="#example-e0f669c8"></a>
<pre class="lang-javascript highlight">animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> duration<c- o>:</c-> <c- mi>5000</c-> <c- p>});</c->
animation<c- p>.</c->currentTime <c- o>=</c-> <c- mi>4000</c-><c- p>;</c->
animation<c- p>.</c->pause<c- p>();</c->
animation<c- p>.</c->ready<c- p>.</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
  animation<c- p>.</c->effect<c- p>.</c->updateTiming<c- p>({</c-> duration<c- o>:</c-> <c- mi>3000</c-> <c- p>});</c->
  alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c-> <c- c1>// Displays 'paused'</c->
  animation<c- p>.</c->startTime <c- o>=</c->
    document<c- p>.</c->timeline<c- p>.</c->currentTime <c- o>-</c-> animation<c- p>.</c->currentTime <c- o>*</c-> animation<c- p>.</c->playbackRate<c- p>;</c->
  alert<c- p>(</c->animation<c- p>.</c->playState<c- p>);</c-> <c- c1>// Displays 'finished'</c->
<c- p>});</c-></pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="4.4.19" id="animation-events-section"><span class="secno">4.4.19. </span><span class="content">Animation events</span><a class="self-link" href="#animation-events-section"></a></h4>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-events">Animation events</dfn> include the <a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events">animation playback events</a> defined in
this specification as well as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions/#transition-events" id="ref-for-transition-events">events from CSS transitions</a> <a data-link-type="biblio" href="#biblio-css-transitions-1">[CSS-TRANSITIONS-1]</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-animations/#events" id="ref-for-events">events from CSS animations</a> <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>.
Future specifications may extend this set with further types of <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events②">animation
events</a>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-animation-event-queue">pending animation event queue</dfn> that
stores <a data-link-type="dfn" href="#animation-events" id="ref-for-animation-events③">animation events</a> along with their corresponding event targets and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scheduled-event-time">scheduled event time</dfn>.
The <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time⑤">scheduled event time</a> is a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⓪">time value</a> relative to the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#time-origin" id="ref-for-time-origin②">time origin</a> representing when the event would ideally have been dispatched were animations
updated at an infinitely high frequency.
It is used by the procedure to <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events③">update animations and send events</a> to sort
queued <span id="ref-for-animation-events④">animation events</span> chronologically.
Note that this value may be <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑥⑨">unresolved</a> if, for example, the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③②">animation</a>'s <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④③">timeline</a> produces values that are unrelated to the <span id="ref-for-time-origin③">time origin</span> (e.g.
a timeline that tracks scroll-position) or if the <span id="ref-for-timeline④④">timeline</span> is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⑥">inactive</a>.</p>
   <h5 class="heading settled" data-level="4.4.19.1" id="sorting-animation-events"><span class="secno">4.4.19.1. </span><span class="content">Sorting animation events</span><a class="self-link" href="#sorting-animation-events"></a></h5>
   <p>The following definitions are provided to assist with sorting queued events.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation time to timeline time" data-noexport id="animation-time-to-timeline-time">convert an animation time to
timeline time a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③①">time value</a>, <var>time</var>, that is relative to the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⑥">start
time</a> of an animation, <var>animation</var>, perform the following steps:</dfn></p>
   <ol>
    <li data-md>
     <p>If <var>time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⓪">unresolved</a>, return <var>time</var>.</p>
    <li data-md>
     <p>If <var>time</var> is infinity, return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦①">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③②">time value</a>.</p>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③③">playback rate</a> is zero,
 return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦②">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③③">time value</a>.</p>
    <li data-md>
     <p>If <var>animation</var>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⑦">start time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦③">unresolved</a>,
 return an <span id="ref-for-unresolved⑦④">unresolved</span> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③④">time value</a>.</p>
    <li data-md>
     <p>Return the result of calculating: <code><var>time</var> × (1 / <var>playback rate</var>) + <var>start time</var></code> (where <var>playback rate</var> and <var>start time</var> are the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③④">playback rate</a> and <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⑧">start time</a> of <var>animation</var>, respectively).</p>
   </ol>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation time to origin-relative time" data-noexport id="animation-time-to-origin-relative-time">convert a timeline time to
an origin-relative time</dfn> a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑤">time value</a>, <var>time</var>, that is expressed in the
same scale as the <span id="ref-for-time-value③⑥">time values</span> of a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑤">timeline</a>, <var>timeline</var>, perform the
following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>timeline time</var> be the result of <a data-link-type="dfn" href="#animation-time-to-timeline-time" id="ref-for-animation-time-to-timeline-time">converting</a> <var>time</var> from an animation time to a timeline time.</p>
    <li data-md>
     <p>If <var>timeline time</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑤">unresolved</a>,
 return <var>time</var>.</p>
    <li data-md>
     <p>If <var>animation</var> is not associated with a <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑥">timeline</a>,
 return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑥">unresolved</a> time value.</p>
    <li data-md>
     <p>If <var>animation</var> is associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⑦">inactive timeline</a>,
 return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑦">unresolved</a> time value.</p>
    <li data-md>
     <p>If there is no procedure to <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time②">convert a timeline time to an origin-relative time</a> for the
 timeline associated with <var>animation</var>,
 return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑧">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑦">time value</a>.</p>
    <li data-md>
     <p>Return the result of <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time③">converting</a> <var>timeline time</var> to an origin-relative time using
 the procedure defined for the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑦">timeline</a> associated with <var>animation</var>.</p>
   </ol>
   <h5 class="heading settled" data-level="4.4.19.2" id="animation-playback-events-section"><span class="secno">4.4.19.2. </span><span class="content">Animation playback events</span><a class="self-link" href="#animation-playback-events-section"></a></h5>
   <p>As <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③③">animations</a> play, they report changes to their status through <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-playback-events">animation playback events</dfn>.</p>
   <p><a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events①">Animation playback events</a> are a property of the timing model. As a result
they are dispatched even when the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②⓪">associated effect</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③④">animation</a> is absent or has no observable result.</p>
   <h5 class="heading settled" data-level="4.4.19.3" id="animation-playback-event-types"><span class="secno">4.4.19.3. </span><span class="content">Types of animation playback events</span><a class="self-link" href="#animation-playback-event-types"></a></h5>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="finish event" data-noexport id="finish-event">finish</dfn>
    <dd data-md>
     <p>Queued whenever an animation enters the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①②">finished play state</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cancel event" data-noexport id="cancel-event">cancel</dfn>
    <dd data-md>
     <p>Queued whenever an animation enters the <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state⑤">idle play state</a> from
another state. Creating a new <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑤">animation</a> that is initially
idle does <em>not</em> generate a new <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event②">cancel event</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="remove event" data-noexport id="remove-event">remove</dfn>
    <dd data-md>
     <p>Queued whenever an animation is automatically removed.
See <a href="#replacing-animations">§ 5.5 Replacing animations</a>.</p>
   </dl>
   <h3 class="heading settled" data-level="4.5" id="animation-effects"><span class="secno">4.5. </span><span class="content">Animation effects</span><a class="self-link" href="#animation-effects"></a></h3>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-effect">animation effect</dfn> is an abstract term referring to an item in
the timing hierarchy.</p>
   <h4 class="heading settled" data-level="4.5.1" id="animation-effects-and-animations"><span class="secno">4.5.1. </span><span class="content">Relationship between animation effects
  and animations</span><a class="self-link" href="#animation-effects-and-animations"></a></h4>
   <p>The <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②①">associated effect</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑥">animation</a>, if set, is a type of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥">animation effect</a>.
The <span id="ref-for-associated-effect②②">associated effect</span> of an <span id="ref-for-concept-animation③⑦">animation</span> is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="associated with an animation" data-noexport id="associated-with-an-animation">associated</dfn> with that animation.
At a given moment, an <span id="ref-for-animation-effect⑦">animation effect</span> can be <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation">associated</a> with at most one <span id="ref-for-concept-animation③⑧">animation</span>.</p>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧">animation effect</a>, <var>effect</var>, is <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="associated with a timeline" data-noexport id="associated-with-a-timeline">associated with
a timeline</dfn>, <var>timeline</var>, if <var>effect</var> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①">associated with an animation</a> which, in turn, is associated with <var>timeline</var>.</p>
   <h4 class="heading settled" data-level="4.5.2" id="types-of-animation-effects"><span class="secno">4.5.2. </span><span class="content">Types of animation effects</span><a class="self-link" href="#types-of-animation-effects"></a></h4>
   <p>This specification defines a single type of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨">animation effect</a>: <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①">keyframe effects</a>.
Subsequent levels of this specification will define further types of <span id="ref-for-animation-effect①⓪">animation effects</span>.</p>
   <p>All types of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①">animation effects</a> define a number of common
properties which are described in the following sections.</p>
   <h4 class="heading settled" data-level="4.5.3" id="the-active-interval"><span class="secno">4.5.3. </span><span class="content">The active interval</span><a class="self-link" href="#the-active-interval"></a></h4>
   <div class="informative-bg">
    <p>The period that an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①②">animation effect</a> is scheduled to run is
called its <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval">active interval</a>.
Each <span id="ref-for-animation-effect①③">animation effect</span> has only one such interval.</p>
    <p>The lower bound of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①">active interval</a> typically corresponds
to the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time③⑨">start time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation③⑨">animation</a> associated with this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①④">animation effect</a> but may be shifted by a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay">start delay</a> on the <span id="ref-for-animation-effect①⑤">animation effect</span>.</p>
    <p>The upper bound of the interval is determined by the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration">active
duration</a>.</p>
    <p>The relationship between the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④⓪">start time</a>, <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①">start
delay</a>, and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①">active duration</a> is illustrated below.</p>
    <figure>
      <img alt="Examples of the effect of the start delay on the endpoints
          of the active interval" src="img/active-interval-examples.svg" width="600"> 
     <figcaption> Examples of the effect of the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②">start delay</a> on the endpoints of
    the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval②">active interval</a>.<br> (a) An animation effect with no delay; the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④①">start time</a> and beginning of
    the <span id="ref-for-active-interval③">active interval</span> are coincident.<br> (b) An animation effect with a positive delay; the beginning of the <span id="ref-for-active-interval④">active interval</span> is deferred by the delay.<br> (c) An animation effect with a negative delay; the beginning of the <span id="ref-for-active-interval⑤">active interval</span> is brought forward by the delay. </figcaption>
    </figure>
    <p>An <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay">end delay</a> may also be specified but is primarily only of
use when sequencing animations.</p>
   </div>
   <p><a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑥">Animation effects</a> define an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-interval">active interval</dfn> which is
the period of time during which the effect is scheduled to produce its
effect with the exception of <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode">fill modes</a> which apply outside the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑥">active interval</a>.</p>
   <p>The lower bound of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑦">active interval</a> is defined by the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay③">start delay</a>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-delay">start delay</dfn> of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑦">animation effect</a> is a signed offset
from the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④②">start time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⓪">animation</a> with which the animation effect is associated.</p>
   <p>The length of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑧">active interval</a> is called the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration②">active
duration</a>, the calculation of which is defined in <a href="#calculating-the-active-duration">§ 4.8.2 Calculating the active duration</a>.</p>
   <p>Similar to the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay④">start delay</a>, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⑧">animation effect</a> also has
an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-delay">end delay</dfn> which is primarily of use when sequencing animations
based on the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time③">end time</a> of another <span id="ref-for-animation-effect①⑨">animation effect</span>.
Although this is typically only useful in combination with sequence effects
which are introduced in a subsequent level of this specification, it is included
here for the purpose of representing the <a href="https://www.w3.org/TR/SVG/animate.html#MinAttribute"><code>min</code></a> attribute in SVG (<a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>, Chapter 19).</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-time">end time</dfn> of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⓪">animation effect</a> is
the result of evaluating <code>max(<a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑤">start delay</a> + <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration③">active
duration</a> + <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay①">end delay</a>, 0)</code>.</p>
   <h4 class="heading settled" data-level="4.5.4" id="local-time-section"><span class="secno">4.5.4. </span><span class="content">Local time</span><a class="self-link" href="#local-time-section"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="local-time">local time</dfn> of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②①">animation effect</a> at a given
moment is based on the first matching condition from the following:</p>
   <div class="switch">
    <dl>
     <dt data-md>If the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②②">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation②">associated with an animation</a>,
     <dd data-md>
      <p>the local time is the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤⑤">current time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④①">animation</a>.</p>
     <dt data-md>Otherwise,
     <dd data-md>
      <p>the local time is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑦⑨">unresolved</a>.</p>
    </dl>
   </div>
   <h4 class="heading settled" data-level="4.5.5" id="animation-effect-phases-and-states"><span class="secno">4.5.5. </span><span class="content">Animation effect phases and
states</span><a class="self-link" href="#animation-effect-phases-and-states"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>At a given moment, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②③">animation effect</a> may be in one of three
possible <em>phases</em>.
If an <span id="ref-for-animation-effect②④">animation effect</span> has an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⓪">unresolved</a> <a data-link-type="dfn" href="#local-time" id="ref-for-local-time">local
time</a> it will not be in any phase.</p>
    <p>The different phases are illustrated below.</p>
    <figure>
      <img alt="An example of the different phases and states used to
          describe an animation effect." src="img/animation-effect-phases-and-states.svg" width="700"> 
     <figcaption> An example of the different phases and states used to describe
    an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑤">animation effect</a>. </figcaption>
    </figure>
    <p>The phases are as follows:</p>
    <dl>
     <dt data-md><a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase">before phase</a>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑥">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①">local time</a> falls before the
effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval⑨">active interval</a> and <a data-link-type="dfn" href="#end-time" id="ref-for-end-time④">end time</a>, <em>or</em> occurs during the range when a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑥">start delay</a> is in
effect.</p>
     <dt data-md><a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase">active phase</a>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑦">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②">local time</a> falls inside the
effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⓪">active interval</a> and outside the range of any
negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑦">start delay</a> or negative <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay②">end delay</a>.</p>
     <dt data-md><a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase">after phase</a>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑧">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time③">local time</a> falls after the
effect’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①①">active interval</a> or after the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑤">end time</a> if that
comes first (due to a negative <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay③">end delay</a>), but <em>not</em> during the range when a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑧">start delay</a> is in effect.</p>
    </dl>
    <p>In addition to these phases, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect②⑨">animation effect</a> may also be
described as being in one of several overlapping <em>states</em>.
These states are only established for the duration of a single <a data-link-type="dfn" href="#animation-frame" id="ref-for-animation-frame③">animation frame</a> and are primarily a convenience for describing stative parts
of the model.</p>
    <p>These states and their useage within the model are summarized as
follows:</p>
    <dl>
     <dt data-md><a data-link-type="dfn" href="#in-play" id="ref-for-in-play">in play</a>
     <dd data-md>
      <p>Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⓪">animation effect</a> whose <a data-link-type="dfn" href="#active-time" id="ref-for-active-time">active time</a> is changing on each frame.</p>
     <dt data-md><a data-link-type="dfn" href="#current" id="ref-for-current">current</a>
     <dd data-md>
      <p>Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③①">animation effect</a> that is either <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①">in
play</a> or may become <span id="ref-for-in-play②">in play</span> in the future based on its <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④②">animation</a>'s current <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑤">playback rate</a>.</p>
     <dt data-md><a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect">in effect</a>
     <dd data-md>
      <p>Corresponds to an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③②">animation effect</a> that has a resolved <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①">active time</a>.
This occurs when either the <span id="ref-for-animation-effect③③">animation effect</span> is in its <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase①">active phase</a> or outside the <span id="ref-for-active-phase②">active phase</span> but at
a time where the effect’s <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①">fill mode</a> (see <a href="#fill-behavior">§ 4.6 Fill behavior</a>)
causes its <span id="ref-for-active-time②">active time</span> to be resolved.
Only <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect①">in effect</a> <span id="ref-for-animation-effect③④">animation effects</span> apply
a result to their target.</p>
    </dl>
    <p>The normative definition of each of these states follows.</p>
   </div>
   <p>Determining the phase of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑤">animation effect</a> requires the following
definitions:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-direction">animation direction</dfn>
    <dd data-md>
     <p>‘backwards’ if the effect is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation③">associated with an
animation</a> <em>and</em> the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④③">animation</a>’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑥">playback rate</a> is less than zero;
in all other cases, the <a data-link-type="dfn" href="#animation-direction" id="ref-for-animation-direction">animation direction</a> is
‘forwards’.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="before-active-boundary-time">before-active boundary time</dfn>
    <dd data-md>
     <p><code>max(min(<a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑨">start delay</a>, <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑥">end time</a>), 0)</code></p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-after-boundary-time">active-after boundary time</dfn>
    <dd data-md>
     <p><code>max(min(<a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⓪">start delay</a> + <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration④">active duration</a>, <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑦">end time</a>), 0)</code></p>
   </dl>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑥">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="before-phase">before phase</dfn> if the
animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time④">local time</a> is not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧①">unresolved</a> and <em>either</em> of the following conditions are met:</p>
   <ol>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑤">local time</a> is less than the <a data-link-type="dfn" href="#before-active-boundary-time" id="ref-for-before-active-boundary-time">before-active boundary time</a>, <em>or</em></p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-direction" id="ref-for-animation-direction①">animation direction</a> is ‘backwards’ and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑥">local
time</a> is equal to the <a data-link-type="dfn" href="#before-active-boundary-time" id="ref-for-before-active-boundary-time①">before-active boundary time</a>.</p>
   </ol>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑦">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="after-phase">after phase</dfn> if the
animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑦">local time</a> is not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧②">unresolved</a> and <em>either</em> of the following conditions are met:</p>
   <ol>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑧">local time</a> is greater than the <a data-link-type="dfn" href="#active-after-boundary-time" id="ref-for-active-after-boundary-time">active-after boundary
time</a>, <em>or</em></p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-direction" id="ref-for-animation-direction②">animation direction</a> is ‘forwards’ and the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑨">local
time</a> is equal to the <a data-link-type="dfn" href="#active-after-boundary-time" id="ref-for-active-after-boundary-time①">active-after boundary time</a>.</p>
   </ol>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑧">animation effect</a> is in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-phase">active phase</dfn> if the
animation effect’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⓪">local time</a> is not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧③">unresolved</a> and it is
not in either the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase①">before phase</a> nor the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase①">after phase</a>.</p>
   <p>Furthermore, it is often convenient to refer to the case when an animation
effect is in none of the above phases as being in the <dfn data-dfn-type="dfn" data-noexport id="idle-phase">idle phase<a class="self-link" href="#idle-phase"></a></dfn>.</p>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect③⑨">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-play">in play</dfn> if <em>all</em> of the following conditions are met:</p>
   <ol>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⓪">animation effect</a> is in the <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase③">active phase</a>, and</p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④①">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation④">associated with an animation</a> that is not <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①③">finished</a>.</p>
   </ol>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④②">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current">current</dfn> if <em>any</em> of the following conditions are true:</p>
   <ul>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④③">animation effect</a> is <a data-link-type="dfn" href="#in-play" id="ref-for-in-play③">in play</a>, or</p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④④">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation⑤">associated with an animation</a> with
a <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑦">playback rate</a> > 0 and
the <span id="ref-for-animation-effect④⑤">animation effect</span> is in the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase②">before phase</a>, or</p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑥">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation⑥">associated with an animation</a> with
a <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑧">playback rate</a> &lt; 0 and
the <span id="ref-for-animation-effect④⑦">animation effect</span> is in the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase②">after phase</a>.</p>
   </ul>
   <p>An animation effect is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-effect">in effect</dfn> if its <a data-link-type="dfn" href="#active-time" id="ref-for-active-time③">active time</a>, as
calculated according to the procedure in <a href="#calculating-the-active-time">§ 4.8.3.1 Calculating the active time</a>,
is <em>not</em> <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧④">unresolved</a>.</p>
   <h3 class="heading settled" data-level="4.6" id="fill-behavior"><span class="secno">4.6. </span><span class="content">Fill behavior</span><a class="self-link" href="#fill-behavior"></a></h3>
   <p>The effect of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑧">animation effect</a> when it is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play④">in play</a> is
determined by its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fill-mode">fill mode</dfn>.</p>
   <p>The possible <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode②">fill modes</a> are:</p>
   <ul>
    <li data-md>
     <p>none,</p>
    <li data-md>
     <p>forwards,</p>
    <li data-md>
     <p>backwards, and</p>
    <li data-md>
     <p>both.</p>
   </ul>
   <p>The normative definition of these modes is incorporated in the
calculation of the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time④">active time</a> in <a href="#calculating-the-active-time">§ 4.8.3.1 Calculating the active time</a>.</p>
   <div class="advisement">
    <p> Authors are discouraged from using <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode③">fill modes</a> to produce animations whose
effect is applied indefinitely. <span id="ref-for-fill-mode④">Fill modes</span> were introduced in order to represent the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode" id="ref-for-propdef-animation-fill-mode">animation-fill-mode</a> property defined by CSS animations <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a>.
However, they produce situations where animation state would be accumulated
indefinitely necessitating the automatic removal of animations defined in <a href="#replacing-animations">§ 5.5 Replacing animations</a>.
Furthermore, indefinitely filling animations can cause changes to specified
style to be ineffective long after all animations have completed since the
animation style takes precedence in the CSS cascade <a data-link-type="biblio" href="#biblio-css-cascade-3">[css-cascade-3]</a>. </p>
    <p> Where possible, authors should prefer to set the final state of the animation
directly in specified style.
This can be achieved by waiting for the animation to finish and then updating
the style as illustrated below: </p>
    <div class="example" id="example-9cfe033d">
     <a class="self-link" href="#example-9cfe033d"></a>
<pre class="lang-javascript highlight"><c- c1>// In the first frame after the following animation finishes, the callback for</c->
<c- c1>// the </c-><code class="highlight"><c- c1>finished</c-></code><c- c1> promise will run BEFORE style is updated and hence will NOT</c->
<c- c1>// flicker.</c->
elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translateY(100px)'</c-> <c- p>},</c-> <c- mi>200</c-><c- p>).</c->finished<c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  elem<c- p>.</c->style<c- p>.</c->transform <c- o>=</c-> <c- t>'translateY(100px)'</c-><c- p>;</c->
<c- p>});</c->
</pre>
    </div>
    <p> Alternatively, the author may set the specified style at the start of the
animation and then animate <em>from</em> the original value
as illustrated below: </p>
    <div class="example" id="example-fb96320c">
     <a class="self-link" href="#example-fb96320c"></a>
<pre class="lang-javascript highlight">elem<c- p>.</c->style<c- p>.</c->transform <c- o>=</c-> <c- t>'translateY(100px)'</c-><c- p>;</c->
elem<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'none'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>200</c-><c- p>);</c->
</pre>
    </div>
    <p>Complex effects involving layering many animations on top of one another may
require temporary use of forwards fill modes to capture the final value of an
animation before canceling it.
For example:</p>
    <div class="example" id="example-1ce27472">
     <a class="self-link" href="#example-1ce27472"></a>
<pre class="lang-javascript highlight">elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> async evt <c- p>=></c-> <c- p>{</c->
  <c- kr>const</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>(</c->
    <c- p>{</c-> transform<c- o>:</c-> <code class="highlight">translate<c- p><c- p>(</c-></c->$<c- p><c- p>{</c-></c->evt<c- p><c- p>.</c-></c->clientX<c- p><c- p>}</c-></c->px<c- p><c- p>,</c-></c-> $<c- p><c- p>{</c-></c->evt<c- p><c- p>.</c-></c->clientY<c- p><c- p>}</c-></c->px<c- p><c- p>)</c-></c-></code> <c- p>},</c->
    <c- p>{</c-> duration<c- o>:</c-> <c- mi>800</c-><c- p>,</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>}</c->
  <c- p>);</c->
  await animation<c- p>.</c->finished<c- p>;</c->
  <c- c1>// commitStyles will record the style up to and including </c-><code class="highlight"><c- c1>animation</c-></code><c- c1> and</c->
  <c- c1>// update elem’s specified style with the result.</c->
  animation<c- p>.</c->commitStyles<c- p>();</c->
  animation<c- p>.</c->cancel<c- p>();</c->
<c- p>});</c->
</pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="4.6.1" id="fill-modes"><span class="secno">4.6.1. </span><span class="content">Fill modes</span><a class="self-link" href="#fill-modes"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The effect of each <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑤">fill mode</a> is as follows:</p>
    <dl>
     <dt data-md>none
     <dd data-md>
      <p>The animation effect has no effect when it is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑤">in play</a>.</p>
     <dt data-md>forwards
     <dd data-md>
      <p>When the animation effect is in the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase③">after phase</a>,
the animation effect will produce the same <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress">iteration progress</a> value as the last moment it is scheduled to be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑥">in play</a>.</p>
      <p>For all other times that the animation effect is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑦">in play</a>,
it will have no effect.</p>
     <dt data-md>backwards
     <dd data-md>
      <p>When the animation effect is in the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase③">before phase</a>,
the animation effect will produce the same <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①">iteration progress</a> value as the earliest moment that it is scheduled to be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑧">in play</a>.</p>
      <p>For all other times that the animation effect is not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑨">in play</a>,
it will have no effect.</p>
     <dt data-md>both
     <dd data-md>
      <p>When the animation effect
is in its <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase④">before phase</a>, <span class="prop-value">backwards</span> fill behavior is used.</p>
      <p>When the animation effect
is in its <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase④">after phase</a>, <span class="prop-value">forwards</span> fill behavior is used.</p>
    </dl>
    <p>Some examples of the these fill modes are illustrated below.</p>
    <figure>
      <img alt="Examples of various fill modes and the states produced." src="img/animation-state-and-fill-behavior.svg" width="600"> 
     <figcaption> Examples of various fill modes and the states produced.<br> (a) fill mode ‘none’. The animation effect has no effect
        outside its active phase.<br> (b) fill mode ‘forwards’. After the active phase has
        finished, the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress②">iteration progress</a> value continues to maintain
        a fill value.<br> (c) fill mode ‘backwards’. The animation effect produces
        a fill value until the start of the active phase.<br> (d) fill mode ‘both’. Both before and after the active
        phase the animation effect produces a fill value. </figcaption>
    </figure>
    <p class="note" role="note"><span>Note:</span> setting a fill mode has no bearing on the endpoints of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①②">active interval</a> or the boundaries between <a href="#animation-effect-phases-and-states">phases</a>.
    However, the fill mode <em>does</em> have an effect on various other
    properties of the timing model since the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑤">active time</a> of an
    animation effect is only defined (that is, not <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑤">unresolved</a>) inside
    the <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase④">active phase</a> <em>or</em> when a fill is applied.</p>
   </div>
   <h3 class="heading settled" data-level="4.7" id="repeating"><span class="secno">4.7. </span><span class="content">Repeating</span><a class="self-link" href="#repeating"></a></h3>
   <h4 class="heading settled" data-level="4.7.1" id="iteration-intervals"><span class="secno">4.7.1. </span><span class="content">Iteration intervals</span><a class="self-link" href="#iteration-intervals"></a></h4>
   <p>It is possible to specify that an animation effect should repeat
a fixed number of times or indefinitely.
This repetition occurs <em>within</em> the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①③">active interval</a>.
The span of time during which a single repetition takes place is
called an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-interval">iteration interval</dfn>.</p>
   <p>Unlike the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①④">active interval</a>, an animation effect can have multiple <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval">iteration intervals</a> although typically only the interval
corresponding to the <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration">current iteration</a> is of interest.</p>
   <p>The length of a single iteration is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="iteration duration" data-noexport id="iteration-duration">iteration
duration</dfn>.
The initial <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①">iteration duration</a> of an animation effect is zero.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Comparing the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration②">iteration duration</a> and the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑤">active
duration</a> we have:</p>
    <dl>
     <dt data-md>Iteration duration
     <dd data-md>
      <p>The time taken for a single iteration of the animation effect to
complete.</p>
     <dt data-md>Active duration
     <dd data-md>
      <p>The time taken for the entire animation effect to complete,
including repetitions.
This may be longer or shorter than the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration③">iteration duration</a>.</p>
    </dl>
    <p>The relationship between the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration④">iteration duration</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑥">active
duration</a> is illustrated below.</p>
    <figure>
      <img alt="Comparison of the iteration duration and active time." src="img/iteration-intervals.svg" width="600"> 
     <figcaption> A comparison of the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑤">iteration duration</a> and <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑦">active
    duration</a> of an animation effect with an <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count">iteration count</a> of
    2.5.
    Note that the <span id="ref-for-iteration-duration⑥">iteration duration</span> for the final iteration does
    not change, it is simply cut-off by the <span id="ref-for-active-duration⑧">active duration</span>. </figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.7.2" id="controlling-iteration"><span class="secno">4.7.2. </span><span class="content">Controlling iteration</span><a class="self-link" href="#controlling-iteration"></a></h4>
   <p>The number of times an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect④⑨">animation effect</a> repeats is called its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-count">iteration count</dfn>.
The <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①">iteration count</a> is a real number greater than or equal to
zero.
The <span id="ref-for-iteration-count②">iteration count</span> may also be positive infinity to represent
that the <span id="ref-for-animation-effect⑤⓪">animation effect</span> repeats indefinitely.</p>
   <p>In addition to the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count③">iteration count</a>, <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤①">animation effects</a> also
have an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-start">iteration start</dfn> property which specifies an offset
into the series of iterations at which the <span id="ref-for-animation-effect⑤②">animation effect</span> should begin.
The <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start">iteration start</a> is a finite real number greater than or
equal to zero.</p>
   <p>The behavior of these parameters is defined in the calculations in <a href="#core-animation-effect-calculations">§ 4.8 Core animation effect calculations</a>.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The effect of the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count④">iteration count</a> and <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①">iteration start</a> parameters is illustrated below.</p>
    <figure>
      <img alt="The effect of the iteration count and iteration start parameters" src="img/iteration-count-and-start.svg" width="600"> 
     <figcaption> The effect of the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑤">iteration count</a> and <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start②">iteration start</a> parameters.<br> In the first case the <span id="ref-for-iteration-count⑥">iteration count</span> is 2.5 resulting in the
    third iteration being cut-off half way through its <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval①">iteration
    interval</a>.<br> The second case is the same but with an <span id="ref-for-iteration-start③">iteration start</span> of
    0.5.
    This causes the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤③">animation effect</a> to begin half way through the
    first iteration. </figcaption>
    </figure>
    <p>Unlike the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑦">iteration count</a> parameter, the <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start④">iteration
start</a> parameter does not effect the length of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑨">active
duration</a>.</p>
    <p>Note that values of <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑤">iteration start</a> greater than or equal to
one are generally not useful unless used in combination with an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤④">animation effect</a> that has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation" id="ref-for-iteration-composite-operation">iteration composite
operation</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate">accumulate</a>.</p>
   </div>
   <h4 class="heading settled" data-level="4.7.3" id="iteration-time-space"><span class="secno">4.7.3. </span><span class="content">Iteration time space</span><a class="self-link" href="#iteration-time-space"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>In Web Animations all times are relative to some point of reference.
These different points of reference produce different <em>time
spaces</em>.</p>
    <p>This can be compared to coordinate spaces as used in computer
graphics.
The zero time of a time space is analogous to the origin of
a coordinate space.</p>
    <p>We can describe animations that repeat as establishing a new time space
each time the animation repeats: the <em>iteration time space</em>.</p>
    <p><em>Iteration time space</em> is a time space whose zero time is the
beginning of an animation effect’s current iteration.</p>
    <p>Within the Web Animations model we also refer to <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑥">active
time</a> which is a time relative to the beginning of the active
interval.
This time space, however, is internal to the model and not exposed in
the programming interface or in markup.</p>
    <p>These time spaces are illustrated below.</p>
    <figure>
      <img alt="A comparison of local time, active time, and iteration time." src="img/time-spaces.svg" width="600"> 
     <figcaption> A comparison of local time, active time, and iteration time for an
    animation with a iteration duration of 1s and an iteration count of
    2.5. </figcaption>
    </figure>
    <p class="note" role="note"><span>Note:</span> While the time spaces themselves are not bounded, Web
    Animations defines <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑦">active time</a> and the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress③">iteration
    progress</a> such that they are clamped to a set range as shown in the
    diagram.
    For example, whilst a time of -1 second is a valid time in <em>active time space</em>, the procedure for calculating the <span id="ref-for-active-time⑧">active time</span> defined in <a href="#calculating-the-active-time">§ 4.8.3.1 Calculating the active time</a> will
    never return a negative value.</p>
    <p>In addition to these time spaces we can also refer to the <em>document time space</em> which is time space of the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑧">time
values</a> of the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline③">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>.</p>
   </div>
   <h4 class="heading settled" data-level="4.7.4" id="interval-timing"><span class="secno">4.7.4. </span><span class="content">Interval timing</span><a class="self-link" href="#interval-timing"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>When an animation effect repeats we must define the behavior at the
iteration boundaries.
For this, and indeed for all interval timing, Web Animations uses an
endpoint-exclusive timing model.
This means that whilst the begin time of an interval
is included in the interval, the end time time is not.
In interval notation this can written <code>[begin, end)</code>.
This model provides sensible behavior when intervals are repeated and
sequenced since there is no overlap between the intervals.</p>
    <p>In the examples below, for the repeated effect, at local time 1s,
the iteration time is 0.
For the sequenced animations, at timeline time 1s, only animation B’s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②③">associated effect</a> will be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①⓪">in play</a>; there is no overlap.</p>
    <figure>
      <img alt="Illustration of end-point exclusive timing." src="img/endpoint-exclusive-timing.svg" width="600"> 
     <figcaption> Illustration of end-point exclusive timing. For both repeated and
    sequenced animation effects there is no overlap at the boundaries
    between intervals. </figcaption>
    </figure>
    <p>An exception to this behavior is that when performing a <a href="#fill-behavior">fill</a>, if the fill begins at an
interval endpoint, the endpoint is used.
This behavior falls out of the algorithm given in <a href="#calculating-the-simple-iteration-progress">§ 4.8.3.3 Calculating the simple iteration progress</a> and is illustrated below.</p>
    <figure>
      <img alt="Effect of iterations and fill on iteration time." src="img/endpoint-exclusive-timing-and-fill.svg" width="600"> 
     <figcaption> After one iteration, the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress④">iteration progress</a> is 0, but after two
    iterations (and there onwards), the <span id="ref-for-iteration-progress⑤">iteration progress</span> is 1
    due to the special behavior defined when an animation effect fills. </figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="4.8" id="core-animation-effect-calculations"><span class="secno">4.8. </span><span class="content">Core animation effect calculations</span><a class="self-link" href="#core-animation-effect-calculations"></a></h3>
   <h4 class="heading settled" data-level="4.8.1" id="animation-effect-calculations-overview"><span class="secno">4.8.1. </span><span class="content">Overview</span><a class="self-link" href="#animation-effect-calculations-overview"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>At the core of the Web Animations timing model is the process that
takes a <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①①">local time</a> value and converts it to an <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑥">iteration progress</a>.</p>
    <p>The first step in this process is to calculate the bounds of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑤">active interval</a> which is determined by the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⓪">active
duration</a>.</p>
    <p>This process is illustrated below.</p>
    <figure>
      <img alt="Calculation of the active duration." src="img/active-duration-calculation.svg" width="650"> 
     <figcaption> Calculation of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①①">active duration</a> is based on
    multiplying the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑦">iteration duration</a> by the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑧">iteration count</a>. </figcaption>
    </figure>
    <p> The process for calculating the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①②">active duration</a> is normatively
  defined in <a href="#calculating-the-active-duration">§ 4.8.2 Calculating the active duration</a>. </p>
    <p> Having established the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①③">active duration</a>, the process for
  transforming an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑤">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①②">local time</a> into its <a data-link-type="dfn" href="#transformed-progress" id="ref-for-transformed-progress">transformed progress</a> (<a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑦">iteration progress</a>) is illustrated below. </p>
    <figure>
      <img alt="An overview of timing model calculations." src="img/time-calculations.svg" width="650"> 
     <figcaption> An overview of timing model calculations.<br> (1) The <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①③">local time</a> is determined from the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④④">animation</a>.<br> (2) The <span id="ref-for-local-time①④">local time</span> is converted into an <a data-link-type="dfn" href="#active-time" id="ref-for-active-time⑨">active time</a> by
    incorporating the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①①">start
    delay</a>.<br> (3) The <span id="ref-for-active-time①⓪">active time</span> is divided by the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑧">iteration duration</a> incorporating also the <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑥">iteration start</a> property to produce the <a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress">overall progress</a>.<br> (4) The <span id="ref-for-overall-progress①">overall progress</span> time is then converted to an offset
    within a single iteration: the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress">simple iteration progress</a>.<br> (5) The <span id="ref-for-simple-iteration-progress①">simple iteration progress</span> is converted into a <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress">directed
    progress</a> by incorporating the <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction">playback direction</a>.<br> (6) Finally, a timing function is applied to the <span id="ref-for-directed-progress①">directed
    progress</span> to produce the <a data-link-type="dfn" href="#transformed-progress" id="ref-for-transformed-progress①">transformed progress</a>. </figcaption>
    </figure>
    <p>The first step, calculating the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑤">local time</a> is described in <a href="#local-time-section">§ 4.5.4 Local time</a>.
Steps 2 to 4 in the diagram are described in the following sections.
Steps 5 and 6 are described in <a href="#calculating-the-directed-progress">§ 4.9.1 Calculating the directed progress</a> and <a href="#calculating-the-transformed-progress">§ 4.10.1 Calculating the transformed progress</a> respectively.</p>
   </div>
   <h4 class="heading settled" data-level="4.8.2" id="calculating-the-active-duration"><span class="secno">4.8.2. </span><span class="content">Calculating the active duration</span><a class="self-link" href="#calculating-the-active-duration"></a></h4>
   <p>The <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①④">active duration</a> is calculated as follows:</p>
   <blockquote>
     <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-duration">active duration</dfn> = <code><a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration⑨">iteration duration</a> × <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count⑨">iteration count</a></code> 
    <p> If either the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⓪">iteration duration</a> or <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⓪">iteration count</a> are zero, the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑤">active duration</a> is zero. </p>
    <p class="note" role="note"> This clarification is needed since the result of infinity
      multiplied by zero is undefined according to IEEE 754-2008. </p>
   </blockquote>
   <h4 class="heading settled" data-level="4.8.3" id="transforming-the-local-time"><span class="secno">4.8.3. </span><span class="content">Transforming the local time</span><a class="self-link" href="#transforming-the-local-time"></a></h4>
   <h5 class="heading settled" data-level="4.8.3.1" id="calculating-the-active-time"><span class="secno">4.8.3.1. </span><span class="content">Calculating the active time</span><a class="self-link" href="#calculating-the-active-time"></a></h5>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-time">active time</dfn> is based on the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑥">local time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①②">start delay</a>.
However, it is only defined when the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑥">animation effect</a> should
produce an output and hence depends on its <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑥">fill mode</a> and
phase as follows,</p>
   <div class="switch">
    <dl>
     <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase⑤">before phase</a>,
     <dd data-md>
      <p>The result depends on the first matching condition from the
following,</p>
      <div class="switch">
       <dl>
        <dt data-md>If the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑦">fill mode</a> is <span class="prop-mode">backwards</span> or <span class="prop-mode">both</span>,
        <dd data-md>
         <p>Return the result of evaluating <code>max(<a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑦">local time</a> - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①③">start delay</a>, 0)</code>.</p>
        <dt data-md>Otherwise,
        <dd data-md>
         <p>Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑥">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value③⑨">time value</a>.</p>
       </dl>
      </div>
     <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase⑤">active phase</a>,
     <dd data-md>
      <p>Return the result of evaluating <code><a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑧">local time</a> - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①④">start delay</a></code>.</p>
     <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase⑤">after phase</a>,
     <dd data-md>
      <p>The result depends on the first matching condition from the
following,</p>
      <div class="switch">
       <dl>
        <dt data-md>If the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑧">fill mode</a> is <span class="prop-mode">forwards</span> or <span class="prop-mode">both</span>,
        <dd data-md>
         <p>Return the result of evaluating <code>max(min(<a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑨">local time</a> - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑤">start delay</a>, <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑥">active duration</a>),
          0)</code>.</p>
        <dt data-md>Otherwise,
        <dd data-md>
         <p>Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑦">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⓪">time value</a>.</p>
       </dl>
      </div>
     <dt data-md>Otherwise (the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②⓪">local time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑧">unresolved</a>),
     <dd data-md>
      <p>Return an <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑧⑨">unresolved</a> <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④①">time value</a>.</p>
    </dl>
   </div>
   <h5 class="heading settled" data-level="4.8.3.2" id="calculating-the-overall-progress"><span class="secno">4.8.3.2. </span><span class="content">Calculating the overall progress</span><a class="self-link" href="#calculating-the-overall-progress"></a></h5>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="overall-progress">overall progress</dfn> describes the number of iterations that
have completed (including partial iterations) and is defined as follows:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①①">active time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⓪">unresolved</a>, return <span id="ref-for-unresolved⑨①">unresolved</span>.</p>
    <li data-md>
     <p>Calculate an initial value for <var>overall progress</var> based on the
first matching condition from below,</p>
     <div class="switch">
      <dl>
       <dt data-md>If the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①①">iteration duration</a> is zero,
       <dd data-md>
        <p>If the animation effect is in the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase⑥">before phase</a>, let <var>overall progress</var> be zero, otherwise, let it be equal
to the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①①">iteration count</a>.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Let <var>overall progress</var> be the result of calculating <code><a data-link-type="dfn" href="#active-time" id="ref-for-active-time①②">active time</a> / <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①②">iteration duration</a></code>.</p>
      </dl>
     </div>
    <li data-md>
     <p>Return the result of calculating <code><var>overall
progress</var> + <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑦">iteration start</a></code>.</p>
   </ol>
   <h5 class="heading settled" data-level="4.8.3.3" id="calculating-the-simple-iteration-progress"><span class="secno">4.8.3.3. </span><span class="content">Calculating the simple iteration progress</span><a class="self-link" href="#calculating-the-simple-iteration-progress"></a></h5>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="simple-iteration-progress">simple iteration progress</dfn> is a fraction of the progress
through the current iteration that ignores transformations to the time
introduced by the <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction①">playback direction</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function">timing functions</a> applied to the effect, and is calculated as follows:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress②">overall progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨②">unresolved</a>,
return <span id="ref-for-unresolved⑨③">unresolved</span>.</p>
    <li data-md>
     <p>If <a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress③">overall progress</a> is infinity, let the <var>simple iteration
progress</var> be <code><a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑧">iteration start</a> % 1.0</code>,
otherwise, let the <var>simple iteration progress</var> be <code><a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress④">overall progress</a> % 1.0</code>.</p>
    <li data-md>
     <p>If <em>all</em> of the following conditions are true,</p>
     <ul>
      <li data-md>
       <p>the <var>simple iteration progress</var> calculated above is zero, <em>and</em></p>
      <li data-md>
       <p>the animation effect is in the <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase⑥">active phase</a> <em>or</em> the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase⑥">after phase</a>, <em>and</em></p>
      <li data-md>
       <p>the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①③">active time</a> is equal to the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑦">active duration</a>, <em>and</em></p>
      <li data-md>
       <p>the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①②">iteration count</a> is <em>not</em> equal to zero.</p>
     </ul>
     <p>let the <var>simple iteration progress</var> be 1.0.</p>
     <div class="note" role="note">
      <p>The above step implements the behavior that when an animation’s
  active interval ends precisely at the end of an iteration, it fills by
  holding the endpoint of the final iteration rather than the start of the
  next iteration.</p>
      <p>The final condition prevents this from applying when we never played
  any iterations of the animation to begin with because the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①③">iteration count</a> was zero.</p>
     </div>
    <li data-md>
     <p>Return <var>simple iteration progress</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="4.8.4" id="calculating-the-current-iteration"><span class="secno">4.8.4. </span><span class="content">Calculating the current iteration</span><a class="self-link" href="#calculating-the-current-iteration"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-iteration">current iteration</dfn> can be calculated using the
following steps:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#active-time" id="ref-for-active-time①④">active time</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨④">unresolved</a>, return <span id="ref-for-unresolved⑨⑤">unresolved</span>.</p>
    <li data-md>
     <p>If the animation effect is in the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase⑦">after phase</a> <em>and</em> the <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①④">iteration count</a> is infinity, return infinity.</p>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress②">simple iteration progress</a> is 1.0,
return <code>floor(<a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress⑤">overall progress</a>) - 1</code>.</p>
    <li data-md>
     <p>Otherwise, return <code>floor(<a data-link-type="dfn" href="#overall-progress" id="ref-for-overall-progress⑥">overall progress</a>)</code>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.9" id="direction-control"><span class="secno">4.9. </span><span class="content">Direction control</span><a class="self-link" href="#direction-control"></a></h3>
   <p><a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑦">Animation effects</a> may also be configured to run iterations in
alternative directions using direction control.
For this purpose, <span id="ref-for-animation-effect⑤⑧">animation effects</span> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="playback direction" data-noexport id="playback-direction">playback
direction</dfn> parameter which takes one of the following values:</p>
   <ul>
    <li data-md>
     <p>normal,</p>
    <li data-md>
     <p>reverse,</p>
    <li data-md>
     <p>alternate, or</p>
    <li data-md>
     <p>alternate-reverse.</p>
   </ul>
   <p>The semantics of these values are incorporated into the calculation of
the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress②">directed progress</a> which follows.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>A non-normative definition of these values is as follows:</p>
    <dl>
     <dt data-md>normal
     <dd data-md>
      <p>All iterations are played as specified.</p>
     <dt data-md>reverse
     <dd data-md>
      <p>All iterations are played in the reverse direction from the way
they are specified.</p>
     <dt data-md>alternate
     <dd data-md>
      <p>Even iterations are played as specified, odd iterations are played
in the reverse direction from the way they are specified.</p>
     <dt data-md>alternate-reverse
     <dd data-md>
      <p>Even iterations are played in the reverse direction from the way
they are specified, odd iterations are played as specified.</p>
    </dl>
   </div>
   <h4 class="heading settled" data-level="4.9.1" id="calculating-the-directed-progress"><span class="secno">4.9.1. </span><span class="content">Calculating the directed progress</span><a class="self-link" href="#calculating-the-directed-progress"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directed-progress">directed progress</dfn> is calculated from the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress③">simple iteration progress</a> using the following steps:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress④">simple iteration progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⑥">unresolved</a>, return <span id="ref-for-unresolved⑨⑦">unresolved</span>.</p>
    <li data-md>
     <p>Calculate the <var>current direction</var> using the first
matching condition from the following list:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction②">playback direction</a> is <code>normal</code>,
       <dd data-md>
        <p>Let the <var>current direction</var> be forwards.</p>
       <dt data-md>If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction③">playback direction</a> is <code>reverse</code>,
       <dd data-md>
        <p>Let the <var>current direction</var> be reverse.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <ol>
         <li data-md>
          <p>Let <var>d</var> be the <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration①">current iteration</a>.</p>
         <li data-md>
          <p>If <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction④">playback direction</a> is <code>alternate-reverse</code> increment <var>d</var> by 1.</p>
         <li data-md>
          <p>If <code><var>d</var> % 2 == 0</code>, let the <var>current direction</var> be forwards, otherwise let
  the <var>current direction</var> be reverse.
  If <var>d</var> is infinity, let the <var>current direction</var> be forwards.</p>
        </ol>
      </dl>
     </div>
    <li data-md>
     <p>If the <var>current direction</var> is forwards then return
the <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress⑤">simple iteration progress</a>.</p>
     <p>Otherwise, return <code>1.0 - <a data-link-type="dfn" href="#simple-iteration-progress" id="ref-for-simple-iteration-progress⑥">simple iteration progress</a></code>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.10" id="time-transformations"><span class="secno">4.10. </span><span class="content">Time transformations</span><a class="self-link" href="#time-transformations"></a></h3>
   <p>It is often desirable to control the rate at which an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑤⑨">animation
effect</a> progresses.
For example, easing the rate of animation can create a sense of
momentum and produce a more natural effect.
The CSS Easing Functions Module <a data-link-type="biblio" href="#biblio-css-easing-1">[CSS-EASING-1]</a> defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①">timing
functions</a> for this purpose.</p>
   <p><a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⓪">Animation effects</a> have one <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function②">timing function</a> associated with
them.
The default <span id="ref-for-easing-function③">timing function</span> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#linear-easing-function" id="ref-for-linear-easing-function">linear timing
function</a>.</p>
   <h4 class="heading settled" data-level="4.10.1" id="calculating-the-transformed-progress"><span class="secno">4.10.1. </span><span class="content">Calculating the transformed progress</span><a class="self-link" href="#calculating-the-transformed-progress"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="transformed-progress">transformed progress</dfn> is calculated from the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress③">directed progress</a> using the following steps:</p>
   <ol>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress④">directed progress</a> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved⑨⑧">unresolved</a>,
return <span id="ref-for-unresolved⑨⑨">unresolved</span>.</p>
    <li data-md>
     <p>Calculate the value of the <var>before flag</var> as follows:</p>
     <ol>
      <li data-md>
       <p>Determine the <var>current direction</var> using the procedure
defined in <a href="#calculating-the-directed-progress">§ 4.9.1 Calculating the directed progress</a>.</p>
      <li data-md>
       <p>If the <var>current direction</var> is <span class="prop-value">forwards</span>,
let <var>going forwards</var> be true, otherwise it is false.</p>
      <li data-md>
       <p>The <var>before flag</var> is set if the animation effect is
in the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase⑦">before phase</a> and <var>going forwards</var> is true; or if
the animation effect is in the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase⑧">after phase</a> and <var>going
forwards</var> is false.</p>
     </ol>
    <li data-md>
     <p>Return the result of evaluating the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥①">animation effect</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function④">timing
function</a> passing <a data-link-type="dfn" href="#directed-progress" id="ref-for-directed-progress⑤">directed progress</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#input-progress-value" id="ref-for-input-progress-value">input progress value</a> and <var>before flag</var> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#before-flag" id="ref-for-before-flag">before flag</a>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.11" id="the-iteration-progress"><span class="secno">4.11. </span><span class="content">The iteration progress</span><a class="self-link" href="#the-iteration-progress"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-progress">iteration progress</dfn> of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥②">animation effect</a> is simply
its <a data-link-type="dfn" href="#transformed-progress" id="ref-for-transformed-progress②">transformed progress</a>.</p>
   <h2 class="heading settled" data-level="5" id="animation-model"><span class="secno">5. </span><span class="content">Animation model</span><a class="self-link" href="#animation-model"></a></h2>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>For some kinds of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥③">animation effects</a>, the Web Animations <em>animation
model</em> takes the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑧">iteration progress</a> and <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration②">current iteration</a> values produced by the <em>timing model</em> and uses them to calculate
a corresponding output.</p>
    <p>The output of each such animation effect is then combined with
that of others using an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack">effect stack</a> before being
applied to the target properties (see <a href="#combining-effects">§ 5.4 Combining effects</a>).</p>
   </div>
   <h3 class="heading settled" data-level="5.1" id="introduction-to-the-animation-model"><span class="secno">5.1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction-to-the-animation-model"></a></h3>
   <p>An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥④">animation effect</a> has zero or more associated properties that
it affects in response to changes to its timing output. These properties
are referred to as the effect’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="target property" data-noexport id="target-property">target
properties</dfn>.</p>
   <p>Given an <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress⑨">iteration progress</a>, a <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration③">current iteration</a>, and an <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value">underlying value</a>, an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑤">animation effect</a> produces
an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effect-value">effect value</dfn> for each <a data-link-type="dfn" href="#concept-animatable" id="ref-for-concept-animatable">animatable</a> <a data-link-type="dfn" href="#target-property" id="ref-for-target-property">target property</a> by applying the procedures from the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type">animation type</a> appropriate to the
property.</p>
   <h3 class="heading settled" data-level="5.2" id="animating-properties"><span class="secno">5.2. </span><span class="content">Animating properties</span><a class="self-link" href="#animating-properties"></a></h3>
   <p>Unless otherwise specified, all CSS properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="concept-animatable">animatable</dfn>.
How property values combine is defined by
the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="animation-type">Animation type</dfn> line
in each property’s property definition table:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="not-animatable">not animatable</dfn> 
    <dd>
      The property is not animatable.
    It is not processed when listed in an animation keyframe,
    and is not affected by transitions. 
     <p class="note" role="note"><span>Note:</span> Properties are typically excluded from animation
    because animating them would create excessive complications.
    For example, properties defining animation parameters are <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable">not animatable</a> since doing so would create complex recursive behavior.</p>
     <p class="note" role="note"><span>Note:</span> An <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑥">animation effect</a> that targets only properties
    that are <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable①">not animatable</a> will still exhibit
    the usual behavior for an <span id="ref-for-animation-effect⑥⑦">animation effect</span> such as firing events and
    delaying the fulfilment of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑤">animation</a>’s <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①⓪">current finished promise</a>.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="discrete">discrete</dfn> 
    <dd>
      The property’s values cannot be meaningfully combined,
    thus it is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#not-additive" id="ref-for-not-additive">not additive</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation">interpolation</a> swaps
    from <var>V<sub>a</sub></var> to <var>V<sub>b</sub></var> at 50% (<var>p=0.5</var>),
    i.e. 
     <div class="formula" role="math">
      <math xmlns="http://www.w3.org/1998/Math/MathML">
       <msub>
        <mi>V</mi>
        <mn>result</mn>
       </msub>
       <mo>=</mo>
       <mrow>
        <mfenced close open="{">
         <mtable>
          <mtr>
           <mtd columnalign="left">
            <msub>
             <mi>V</mi>
             <mn>start</mn>
            </msub>
           </mtd>
           <mtd columnalign="left">
            <mtext>if </mtext>
            <mi>p</mi>
            <mo>&lt;</mo>
            <mn>0.5</mn>
           </mtd>
          </mtr>
          <mtr>
           <mtd columnalign="left">
            <msub>
             <mi>V</mi>
             <mn>end</mn>
            </msub>
           </mtd>
           <mtd columnalign="left">
            <mtext>if </mtext>
            <mi>p</mi>
            <mo>≥</mo>
            <mn>0.5</mn>
           </mtd>
          </mtr>
         </mtable>
        </mfenced>
       </mrow>
      </math>
     </div>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="by-computed-value">by computed value</dfn> 
    <dd> Corresponding individual components of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed values</a> are combined (interpolated, added, or accumulated)
    using the indicated procedure for that value type
    (see <a href="https://www.w3.org/TR/css-values-4/#combining-values">CSS Values 4 §3 Combining Values: Interpolation, Addition, and Accumulation</a>).
    If the number of components or the types of corresponding components
    do not match,
    or if any component value uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete">discrete</a> animation
    and the two corresponding values do not match,
    then the property values combine as <span id="ref-for-discrete①">discrete</span>. 
    <dt><dfn data-dfn-type="dfn" data-export id="repeatable-list">repeatable list<a class="self-link" href="#repeatable-list"></a></dfn> 
    <dd>
      Same as <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value">by computed value</a> except that if the two lists have differing numbers of items,
    they are first repeated to the least common multiple number of items.
    Each item is then combined <span id="ref-for-by-computed-value①">by computed value</span>.
    If a pair of values cannot be combined
    or if any component value uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete②">discrete</a> animation,
    then the property values combine as <span id="ref-for-discrete③">discrete</span>. 
     <p class="note" role="note"><span>Note:</span> The repeatable list concept ensures that
    a list that is conceptually repeated to a certain length
    (as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> is repeated to the length of
    the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> list)
    or repeated infinitely
    will smoothly transition between any values,
    and so that the computed value
    will properly represent the result
    (and potentially be inherited correctly).</p>
    <dt>(See prose) 
    <dd> Some properties have specific interpolation behavior not covered by the
    above cases;
    in this case the animation behavior will be specified explicitly
    for that property. 
   </dl>
   <p>The <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①">animation type</a> of properties that do not yet include
an <span id="ref-for-animation-type②">Animation type</span> line in their property definition,
is defined in <a href="#animation-types">Appendix A: Animation types of existing properties</a>.</p>
   <h4 class="heading settled" data-level="5.2.1" id="custom-properties"><span class="secno">5.2.1. </span><span class="content">Custom Properties</span><a class="self-link" href="#custom-properties"></a></h4>
   <p>For <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> registered
using the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty" id="ref-for-dom-css-registerproperty">registerProperty()</a></code> method for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object①">current global object</a>,
the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type③">animation type</a> is <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value②">by computed value</a>,
derived from the type used to define the property’s <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-propertydescriptor-syntax" id="ref-for-dom-propertydescriptor-syntax">syntax</a></code>.
Where there is no <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a> type that corresponds
to the property’s specified <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-propertydescriptor-syntax" id="ref-for-dom-propertydescriptor-syntax①">syntax</a></code> (e.g. when the syntax is "*")
or when the <span id="ref-for-custom-property①">custom property</span> is not registered,
the <span id="ref-for-animation-type④">animation type</span> is <a data-link-type="dfn" href="#discrete" id="ref-for-discrete④">discrete</a>.</p>
   <h3 class="heading settled" data-level="5.3" id="keyframe-effects"><span class="secno">5.3. </span><span class="content">Keyframe effects</span><a class="self-link" href="#keyframe-effects"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="keyframe effect" data-noexport id="keyframe-effect">Keyframe effects</dfn> are a kind of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑧">animation
effect</a> that use the output of the timing model to update CSS properties of
an element or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> (such as <code>::before</code> or <code>::after</code> <a data-link-type="biblio" href="#biblio-select">[select]</a>)
referred to as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effect-target">effect target</dfn>.</p>
   <p>In order for the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target">effect target</a> to have a well-defined lifecycle,
it is represented as an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element">Element</a></code> known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="target-element">target element</dfn> and a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a> selector knows as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="target-pseudo-selector">target pseudo-selector</dfn>.
If the <span id="ref-for-effect-target①">effect target</span> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code>, the <a data-link-type="dfn" href="#target-element" id="ref-for-target-element">target element</a> is that
element and the <a data-link-type="dfn" href="#target-pseudo-selector" id="ref-for-target-pseudo-selector">target pseudo-selector</a> is <code>null</code>.
If the <span id="ref-for-effect-target②">effect target</span> is a <span id="ref-for-pseudo-element②">pseudo-element</span>, the <span id="ref-for-target-element①">target element</span> is
its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a> and the <span id="ref-for-target-pseudo-selector①">target pseudo-selector</span> is as required
to specify that particular <span id="ref-for-pseudo-element③">pseudo-element</span>.</p>
   <h4 class="heading settled" data-level="5.3.1" id="keyframes-section"><span class="secno">5.3.1. </span><span class="content">Keyframes</span><a class="self-link" href="#keyframes-section"></a></h4>
   <p>The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value">effect values</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②">keyframe effect</a> are calculated by interpolating between a series of property values
positioned at fractional offsets.
Each set of property values indexed by an offset is called
a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="keyframe">keyframe</dfn>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="keyframe offset" data-noexport id="keyframe-offset">offset of a keyframe</dfn> is a value
in the range [0, 1] or the special value null.
The list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe">keyframes</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③">keyframe effect</a> must be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="loosely-sorted-by-offset">loosely sorted by offset</dfn> which means that for each <span id="ref-for-keyframe①">keyframe</span> in the list that has a <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset">keyframe offset</a> that is
not null, the offset is greater than or equal to the offset of the
previous <span id="ref-for-keyframe②">keyframe</span> in the list with a <span id="ref-for-keyframe-offset①">keyframe offset</span> that
is not null, if any.</p>
   <p>The behavior when <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③">keyframes</a> overlap or have unsupported values
is defined in <a href="#the-effect-value-of-a-keyframe-animation-effect">§ 5.3.3 The effect value of
  a keyframe effect</a>.</p>
   <p>Each keyframe also has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function⑤">timing function</a> associated with it
that is applied to the period of time between the keyframe on which it
is specified and the <em>next</em> keyframe in the list.
The <span id="ref-for-easing-function⑥">timing function</span> specified on the last keyframe in the
list is never applied.</p>
   <p>Each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④">keyframe</a> may have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="keyframe-specific composite operation" data-noexport id="keyframe-specific-composite-operation">keyframe-specific composite
operation</dfn> that, if set, is applied to all values specified in that <span id="ref-for-keyframe⑤">keyframe</span>.
The possible operations and their meanings are identical to those defined
for the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation">composite operation</a> associated with the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect④">keyframe effect</a> as a whole in <a href="#effect-composition">§ 5.4.4 Effect composition</a>.
If the <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation">keyframe-specific composite operation</a> for a <span id="ref-for-keyframe⑥">keyframe</span> is not set, the <span id="ref-for-composite-operation①">composite operation</span> specified for the <span id="ref-for-keyframe-effect⑤">keyframe effect</span> as a whole is used for values specified in that keyframe.</p>
   <h4 class="heading settled" data-level="5.3.2" id="calculating-computed-keyframes"><span class="secno">5.3.2. </span><span class="content">Calculating computed keyframes</span><a class="self-link" href="#calculating-computed-keyframes"></a></h4>
   <p>Before calculating the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①">effect value</a> of a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑥">keyframe effect</a>,
the property values specified on its <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑦">keyframes</a> are resolved to <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed values</a>, and the offset to use for any keyframes with a null <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset②">keyframe offset</a> is computed. The result of resolving these values is
a set of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="computed-keyframes">computed keyframes</dfn>.</p>
   <p>The calculated <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset③">keyframe offsets</a> of a set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑧">keyframe</a> that
includes suitable values for each null <span id="ref-for-keyframe-offset④">keyframe offset</span> are referred
to as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="computed keyframe offset" data-noexport id="computed-keyframe-offset">computed keyframe offsets.</dfn></p>
   <p>To produce <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset">computed keyframe offsets</a>, we define a procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compute-missing-keyframe-offsets">compute missing keyframe offsets</dfn> that takes a sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑨">keyframes</a>, <var>keyframes</var>, and has the following steps:</p>
   <ol>
    <li data-md>
     <p>For each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⓪">keyframe</a>, in <var>keyframes</var>,
let the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①">computed keyframe offset</a> of the <span id="ref-for-keyframe①①">keyframe</span> be equal to its <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑤">keyframe offset</a> value.</p>
    <li data-md>
     <p>If <var>keyframes</var> contains more than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①②">keyframe</a> and the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②">computed keyframe offset</a> of
the first <span id="ref-for-keyframe①③">keyframe</span> in <var>keyframes</var> is null,
set the <span id="ref-for-computed-keyframe-offset③">computed keyframe offset</span> of
the first <span id="ref-for-keyframe①④">keyframe</span> to 0.</p>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset④">computed keyframe offset</a> of the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑤">keyframe</a> in <var>keyframes</var> is null, set its <span id="ref-for-computed-keyframe-offset⑤">computed keyframe offset</span> to 1.</p>
    <li data-md>
     <p>For each pair of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑥">keyframes</a> <var>A</var> and <var>B</var> where:</p>
     <ul>
      <li data-md>
       <p><var>A</var> appears before <var>B</var> in <var>keyframes</var>, and</p>
      <li data-md>
       <p><var>A</var> and <var>B</var> have a <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset⑥">computed keyframe
offset</a> that is not null, and</p>
      <li data-md>
       <p>all <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑦">keyframes</a> between <var>A</var> and <var>B</var> have a null <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset⑦">computed keyframe offset</a>,</p>
     </ul>
     <p>calculate the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset⑧">computed keyframe offset</a> of
each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑧">keyframe</a> between <var>A</var> and <var>B</var> as follows:</p>
     <ol>
      <li data-md>
       <p>Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="offsetk">offset<sub><var>k</var></sub></dfn> be the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset⑨">computed
keyframe offset</a> of a <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe①⑨">keyframe</a> <var>k</var>.</p>
      <li data-md>
       <p>Let <var>n</var> be the number of keyframes <em>between</em> and
including <var>A</var> and <var>B</var> minus 1.</p>
      <li data-md>
       <p>Let <var>index</var> refer to the position of <var>keyframe</var> in the sequence of keyframes between <var>A</var> and <var>B</var> such that the first keyframe
after <var>A</var> has an <var>index</var> of 1.</p>
      <li data-md>
       <p>Set the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①⓪">computed keyframe offset</a> of <var>keyframe</var> to <a data-link-type="dfn" href="#offsetk" id="ref-for-offsetk">offset</a><sub><var>A</var></sub> +
(<span id="ref-for-offsetk①">offset</span><sub><var>B</var></sub> − <span id="ref-for-offsetk②">offset</span><sub><var>A</var></sub>)
× <var>index</var> / <var>n</var>.</p>
     </ol>
   </ol>
   <p><a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes">Computed keyframes</a> are produced using the following procedure.
Note that this procedure is only performed on a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑦">keyframe effect</a> having
an <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target③">effect target</a> for which computed property values can be calculated.</p>
   <ol>
    <li data-md>
     <p>Let <var>computed keyframes</var> be an empty list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⓪">keyframes</a>.</p>
    <li data-md>
     <p>For each <var>keyframe</var> in the list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②①">keyframes</a> specified on
this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑧">keyframe effect</a>, perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Add a new empty <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②②">keyframe</a>, <var>computed keyframe</var>, to <var>computed keyframes</var>.</p>
      <li data-md>
       <p>For each property specified in <var>keyframe</var>, calculate the
computed value specified on <var>keyframe</var> using the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target④">effect
target</a> as the context for computing values and add the
corresponding property and computed value to <var>computed
keyframe</var>.
For shorthand properties, add the equivalent longhand properties.
For logical properties <a data-link-type="biblio" href="#biblio-css-logical-1">[CSS-LOGICAL-1]</a>, add the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical" id="ref-for-logical-to-physical">equivalent physical
properties</a> <a data-link-type="biblio" href="#biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]</a> based on the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and/or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> for the <span id="ref-for-effect-target⑤">effect target</span>.</p>
       <p>For example, if <var>keyframe</var> has a value of ‘12pt’
for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> property, the user agent may produce a computed
value of ‘16px’ for each of the longhand properties: <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>.
As a result, <var>computed keyframe</var> would <em>not</em> have a
value for the <span class="property" id="ref-for-propdef-border-width①">border-width</span> property, but would instead include
each of the longhand properties, and each with the computed value,
‘16px’.</p>
       <p>If conflicts arise when expanding shorthand properties or replacing
logical properties with physical properties, apply the following rules
in order until the conflict is resolved:</p>
       <ol>
        <li data-md>
         <p>Longhand properties override shorthand properties (e.g. <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a> overrides <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top">border-top</a>).</p>
        <li data-md>
         <p>Shorthand properties with fewer longhand components override those
with more longhand components (e.g. <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top" id="ref-for-propdef-border-top①">border-top</a> overrides <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a>).</p>
        <li data-md>
         <p>Physical properties override logical properties.</p>
        <li data-md>
         <p>For shorthand properties with an equal number of longhand
components, properties whose IDL name (see the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#css-property-to-idl-attribute" id="ref-for-css-property-to-idl-attribute">CSS property to
IDL attribute</a> algorithm <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a>) appears earlier when
sorted in ascending order by the Unicode codepoints that make up
each IDL name, override those who appear later.</p>
       </ol>
     </ol>
    <li data-md>
     <p>Apply the procedure to <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets">compute missing keyframe offsets</a> to <var>computed keyframes</var>.</p>
    <li data-md>
     <p>Return <var>computed keyframes</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="5.3.3" id="the-effect-value-of-a-keyframe-animation-effect"><span class="secno">5.3.3. </span><span class="content">The effect value of
  a keyframe effect</span><a class="self-link" href="#the-effect-value-of-a-keyframe-animation-effect"></a></h4>
   <p>The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②">effect value</a> of a single property referenced by a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect⑨">keyframe
effect</a> as one of its <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①">target properties</a>, for a
given <var>iteration progress</var>, <var>current iteration</var> and <var>underlying value</var> is calculated as follows.</p>
   <ol>
    <li data-md>
     <p>If <var>iteration progress</var> is <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪⓪">unresolved</a> abort this
procedure.</p>
    <li data-md>
     <p>Let <var>target property</var> be the longhand property for which the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value③">effect value</a> is to be calculated.</p>
    <li data-md>
     <p>If <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑤">animation type</a> of the <var>target property</var> is <a data-link-type="dfn" href="#not-animatable" id="ref-for-not-animatable②">not animatable</a> abort this procedure
since the effect cannot be applied.</p>
    <li data-md>
     <p>Define the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="neutral-value-for-composition">neutral value for composition</dfn> as a value
which, when combined with an <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①">underlying value</a> using the <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add">add</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②">composite
operation</a>, produces the <span id="ref-for-underlying-value②">underlying value</span>.</p>
    <li data-md>
     <p>Let <var>property-specific keyframes</var> be the result of
getting the set of <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes①">computed keyframes</a> for this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⓪">keyframe
effect</a>.</p>
    <li data-md>
     <p>Remove any <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②③">keyframes</a> from <var>property-specific
keyframes</var> that do not have a property value for <var>target property</var>.</p>
    <li data-md>
     <p>If <var>property-specific keyframes</var> is empty, return <var>underlying value</var>.</p>
    <li data-md>
     <p>If there is no <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②④">keyframe</a> in <var>property-specific
keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①①">computed keyframe offset</a> of
0, create a new <span id="ref-for-keyframe②⑤">keyframe</span> with a <span id="ref-for-computed-keyframe-offset①②">computed keyframe offset</span> of
0, a property value set to the <a data-link-type="dfn" href="#neutral-value-for-composition" id="ref-for-neutral-value-for-composition">neutral value for
composition</a>, and a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation③">composite operation</a> of <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add①">add</a>, and prepend it to the
beginning of <var>property-specific keyframes</var>.</p>
    <li data-md>
     <p>Similarly, if there is no <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑥">keyframe</a> in <var>property-specific keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①③">computed keyframe
offset</a> of 1,
create a new <span id="ref-for-keyframe②⑦">keyframe</span> with a <span id="ref-for-computed-keyframe-offset①④">computed keyframe offset</span> of 1,
a property value set to the <a data-link-type="dfn" href="#neutral-value-for-composition" id="ref-for-neutral-value-for-composition①">neutral value for composition</a>,
and a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation④">composite operation</a> of <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add②">add</a>, and append it to the
end of <var>property-specific keyframes</var>.</p>
    <li data-md>
     <p>Let <var>interval endpoints</var> be an empty sequence of
keyframes.</p>
    <li data-md>
     <p>Populate <var>interval endpoints</var> by following the steps from
the first matching condition from below:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>iteration progress</var> &lt; 0 and there is more
than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑧">keyframe</a> in <var>property-specific
keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①⑤">computed keyframe offset</a> of
0,
       <dd data-md>
        <p>Add the first <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe②⑨">keyframe</a> in <var>property-specific
keyframes</var> to <var>interval endpoints</var>.</p>
       <dt data-md>If <var>iteration progress</var> ≥ 1 and there is more
than one <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⓪">keyframe</a> in <var>property-specific
keyframes</var> with a <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①⑥">computed keyframe offset</a> of
1,
       <dd data-md>
        <p>Add the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③①">keyframe</a> in <var>property-specific
keyframes</var> to <var>interval endpoints</var>.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <ol>
         <li data-md>
          <p>Append to <var>interval endpoints</var> the last <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③②">keyframe</a> in <var>property-specific
keyframes</var> whose <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①⑦">computed keyframe offset</a> is less than
or equal to <var>iteration progress</var> and less than 1.  If
there is no such <span id="ref-for-keyframe③③">keyframe</span> (because, for example,
the <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①⓪">iteration progress</a> is negative), add the last <span id="ref-for-keyframe③④">keyframe</span> whose <span id="ref-for-computed-keyframe-offset①⑧">computed keyframe offset</span> is 0.</p>
         <li data-md>
          <p>Append to <var>interval endpoints</var> the next <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑤">keyframe</a> in <var>property-specific keyframes</var> after the one added in the previous step.</p>
        </ol>
      </dl>
     </div>
    <li data-md>
     <p>For each <var>keyframe</var> in <var>interval endpoints</var>:</p>
     <ol>
      <li data-md>
       <p>If <var>keyframe</var> has a <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation⑤">composite operation</a> that is <em>not</em> <a data-link-type="dfn" href="#composite-operation-replace" id="ref-for-composite-operation-replace">replace</a>, or <var>keyframe</var> has no <span id="ref-for-composite-operation⑥">composite operation</span> and the <span id="ref-for-composite-operation⑦">composite operation</span> of this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①①">keyframe
effect</a> is <em>not</em> <span id="ref-for-composite-operation-replace①">replace</span>, then
perform the following steps:</p>
       <ol>
        <li data-md>
         <p>Let <var>composite operation to use</var> be the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation⑧">composite operation</a> of <var>keyframe</var>, or if
it has none, the <span id="ref-for-composite-operation⑨">composite operation</span> of this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①②">keyframe effect</a>.</p>
        <li data-md>
         <p>Let <var>value to combine</var> be the property value of <var>target property</var> specified on <var>keyframe</var>.</p>
        <li data-md>
         <p>Replace the property value of <var>target property</var> on <var>keyframe</var> with the result of combining <var>underlying value</var> (<var>V</var><sub>a</sub>) and <var>value to combine</var> (<var>V</var><sub>b</sub>)
using the procedure for the <var>composite operation to use</var> corresponding to the <var>target property</var>’s <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑥">animation type</a>.</p>
       </ol>
     </ol>
    <li data-md>
     <p>If there is only one keyframe in <var>interval endpoints</var> return the property value of <var>target property</var> on that
keyframe.</p>
    <li data-md>
     <p>Let <var>start offset</var> be the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset①⑨">computed keyframe offset</a> of the
first keyframe in <var>interval endpoints</var>.</p>
    <li data-md>
     <p>Let <var>end offset</var> be the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②⓪">computed keyframe offset</a> of
last keyframe in <var>interval endpoints</var>.</p>
    <li data-md>
     <p>Let <var>interval distance</var> be the result of evaluating <code>(<var>iteration progress</var> - <var>start offset</var>) /
(<var>end offset</var> - <var>start offset</var>)</code>.</p>
    <li data-md>
     <p>Let <var>transformed distance</var> be the result of evaluating
the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function⑦">timing function</a> associated with the first keyframe in <var>interval endpoints</var> passing <var>interval distance</var> as the input progress.</p>
    <li data-md>
     <p>Return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation①">interpolation procedure</a> defined
by the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑦">animation type</a> of the <var>target property</var>,
to the values of the <var>target property</var> specified on the
two keyframes in <var>interval endpoints</var> taking the first such
value as <var>V</var><sub>start</sub> and the second as <var>V</var><sub>end</sub> and using <var>transformed
distance</var> as the interpolation parameter <var>p</var>.</p>
   </ol>
   <div class="note" role="note">
    <p>Note that this procedure assumes the following about the list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑥">keyframes</a> specified on the effect:</p>
    <p></p>
    <ul>
     <li data-md>
      <p>Each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑦">keyframe</a> has a specified <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②①">computed keyframe offset</a> in
the range [0, 1].</p>
     <li data-md>
      <p>The list of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑧">keyframes</a> is sorted in ascending order by <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②②">computed keyframe offset</a>.</p>
     <li data-md>
      <p>For a given property, there is at most one specified property
value on each keyframe.</p>
    </ul>
    <p>It is the responsibility of the user of the model (for example,
    a declarative markup or programming interface) to ensure these
    conditions are met.</p>
    <p>For example, for the <a href="#programming-interface">programming
    interface</a> defined by this specification, these conditions are
    met by the procedure to produce the <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes②">computed keyframes</a> that
    become the input to this procedure.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> this procedure permits overlapping <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe③⑨">keyframes</a>.
    The behavior is that at the point of overlap the output value jumps to
    the value of the last defined <span id="ref-for-keyframe④⓪">keyframe</span> at that offset.
    For overlapping keyframes at 0 or 1, the output value for <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①①">iteration
    progress</a> values less than 0 or greater than
    or equal to 1 is the value of the first <span id="ref-for-keyframe④①">keyframe</span> or the last <span id="ref-for-keyframe④②">keyframe</span> in <var>keyframes</var> respectively.</p>
   <div class="issue" id="issue-11fd5835">
    <a class="self-link" href="#issue-11fd5835"></a> In the presence of certain timing functions, the input iteration
    progress to an animation effect is not limited to the range [0, 1].
    Currently, however, keyframe offsets <em>are</em> limited to the
    range [0, 1] and property values are simply extrapolated for input
    iteration progress values outside this range. 
    <p>We have considered removing this restriction since some cases exist
    where it is useful to be able to specify non-linear
    changes in property values at iteration progress values outside the
    range [0, 1].
    One example is an animation that interpolates from green to yellow
    but has an overshoot timing function that makes it temporarily
    interpolate ‘beyond’ yellow to red before settling back
    to yellow.</p>
    <p>While this effect could be achieved by modification of the keyframes
    and timing function, this approach seems to break the model’s
    separation of timing concerns from animation effects.</p>
    <p>It is not clear how this effect should be achieved but we note that
    allowing keyframe offsets outside [0, 1] may make the currently
    specified behavior where keyframes at offset 0 and 1 are synthesized
    as necessary, inconsistent.</p>
    <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section
    4 (Keyframe offsets outside [0, 1]) of minuted discussion from Tokyo
      2013 F2F</a>.</p>
    <p><a href="https://github.com/w3c/csswg-drafts/issues/2081">&lt;https://github.com/w3c/csswg-drafts/issues/2081></a></p>
   </div>
   <h3 class="heading settled" data-level="5.4" id="combining-effects"><span class="secno">5.4. </span><span class="content">Combining effects</span><a class="self-link" href="#combining-effects"></a></h3>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>After calculating the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value④">effect values</a> for a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①③">keyframe effect</a>, they are applied to the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑥⑨">animation
effect</a>’s <a data-link-type="dfn" href="#target-property" id="ref-for-target-property②">target properties</a>.</p>
    <p>Since it is possible for multiple <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect②">in effect</a> <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①④">keyframe effects</a> to
target the same property it is often necessary to combine the results of several <span id="ref-for-keyframe-effect①⑤">keyframe effects</span> together.
This process is called <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite | composition" data-noexport id="composite">compositing</dfn> and is based on establishing an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①">effect stack</a> for each property
targeted by an <span id="ref-for-in-effect③">in effect</span> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⓪">animation effect</a>.</p>
    <p>After <a data-link-type="dfn" href="#composite" id="ref-for-composite">compositing</a> the results of <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑥">keyframe
effects</a> together, the composited result is combined with other
values specified for the <a data-link-type="dfn" href="#target-property" id="ref-for-target-property③">target property</a>.</p>
    <p>The arrangement is illustrated below:</p>
    <figure>
      <img alt="Overview of the application of effect values to their target properties" src="img/animation-cascade.svg" width="500"> 
     <figcaption> Overview of the application of <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑤">effect values</a> to
    their <a data-link-type="dfn" href="#target-property" id="ref-for-target-property④">target properties</a>.<br> The results of <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑦">keyframe effects</a> targeting the same property
    are composited together using an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack②">effect stack</a>.<br> The result of this composition is then inserted into the CSS cascade
    at an appropriate point. </figcaption>
    </figure>
    <p>For the first part of this operation—combining <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑥">effect values</a> that
target the same <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑤">property</a>— it is necessary to
determine both <em>how</em> <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑧">keyframe effects</a> are combined with one another,
as well as the <em>order</em> in which they are applied, that is,
their relative <em>composite order</em>.</p>
    <p>The matter of <em>how</em> <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑦">effect values</a> are
combined is governed by the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⓪">composite operation</a> of
the corresponding <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect①⑨">keyframe effects</a>.</p>
    <p>The relative <em>composite order</em> of <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑧">effect values</a> is determined by an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack③">effect stack</a> established for each
animated property.</p>
   </div>
   <h4 class="heading settled" data-level="5.4.1" id="animation-classes"><span class="secno">5.4.1. </span><span class="content">Animation classes</span><a class="self-link" href="#animation-classes"></a></h4>
   <p>This specification provides a common animation model intended to be used
by other specifications that define markup or programming interfaces on
top of this model. The particular markup or programming interface that
generated an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑥">animation</a> defines its <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-class">animation class</dfn>.</p>
   <p>Further specifications may define specialized behavior for composite
ordering between different classes of animations or within a particular class.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>For example, animations whose <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class①">class</a> is ‘CSS
animation’ are defined as having a <em>higher</em> composite order than
animations whose class is ‘CSS transition’ but <em>lower</em> than
other animations without a specific class.</p>
    <p>Within the set of ‘CSS animation’ objects, specialized
composite ordering is defined based on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name" id="ref-for-propdef-animation-name">animation-name</a> property
amongst other factors.</p>
   </div>
   <h4 class="heading settled" data-level="5.4.2" id="the-effect-stack"><span class="secno">5.4.2. </span><span class="content">The effect stack</span><a class="self-link" href="#the-effect-stack"></a></h4>
   <p>Associated with each property <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑥">targeted</a> by one or more <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⓪">keyframe effects</a> is an <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="effect stack" data-noexport id="effect-stack">effect
stack</dfn> that establishes the relative composite order of the <span id="ref-for-keyframe-effect②①">keyframe
effects</span>.</p>
   <p>The relative <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="composite order" data-lt="animation composite order" id="animation-composite-order">composite order</dfn> of any two <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②②">keyframe effects</a>, <var>A</var> and <var>B</var>,
within an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack④">effect stack</a> is
established by comparing their properties as follows:</p>
   <ol>
    <li data-md>
     <p>Let the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-animation-of-an-animation-effect">associated animation of an animation effect</dfn> be the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑦">animation</a> <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation⑦">associated</a> with the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦①">animation effect</a> that affecting the property with which this <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑤">effect stack</a> is associated.</p>
    <li data-md>
     <p>Sort <var>A</var> and <var>B</var> by applying the following
conditions in turn until the order is resolved,</p>
     <ol>
      <li data-md>
       <p>If <var>A</var> and <var>B</var>’s associated animations differ by <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class②">class</a>, sort by any inter-class composite
order defined for the corresponding classes.</p>
      <li data-md>
       <p>If <var>A</var> and <var>B</var> are still not sorted,
sort by any <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class③">class</a>-specific composite order
defined by the common class of <var>A</var> and <var>B</var>’s
associated animations.</p>
      <li data-md>
       <p>If <var>A</var> and <var>B</var> are still not sorted,
sort by their corresponding position in the <a data-link-type="dfn" href="#global-animation-list" id="ref-for-global-animation-list">global animation
list</a>.</p>
     </ol>
   </ol>
   <p><a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦②">Animation effects</a> that sort earlier have <em>lower</em> composite order.</p>
   <h4 class="heading settled" data-level="5.4.3" id="calculating-the-result-of-an-effect-stack"><span class="secno">5.4.3. </span><span class="content">Calculating the result of an effect stack</span><a class="self-link" href="#calculating-the-result-of-an-effect-stack"></a></h4>
   <p>In order to calculate the final value of an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑥">effect stack</a>,
the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value⑨">effect values</a> of each <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②③">keyframe effect</a> in the stack are
combined in composite order.</p>
   <p>Each step in the process of evaluating an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑦">effect stack</a> takes
an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="underlying-value">underlying value</dfn> as input.</p>
   <p>For each <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②④">keyframe effect</a> in the stack, the appropriate <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⓪">effect value</a> from the <span id="ref-for-keyframe-effect②⑤">keyframe effect</span> is combined with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value③">underlying value</a> to produce a new value.
This resulting value becomes the <span id="ref-for-underlying-value④">underlying value</span> for combining
the next <span id="ref-for-keyframe-effect②⑥">keyframe effect</span> in the stack.</p>
   <p>The final value of an <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑧">effect stack</a>, called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="composited-value">composited value</dfn>, is simply the result of combining the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①①">effect value</a> of the final (highest composite order) <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑦">keyframe effect</a> in the stack with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑤">underlying value</a> at that point.</p>
   <h4 class="heading settled" data-level="5.4.4" id="effect-composition"><span class="secno">5.4.4. </span><span class="content">Effect composition</span><a class="self-link" href="#effect-composition"></a></h4>
   <p>The specific operation used to combine an <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①②">effect value</a> with an <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑥">underlying value</a> is determined by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="composite-operation">composite operation</dfn> of the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑧">keyframe effect</a> that
produced the <span id="ref-for-effect-value①③">effect value</span>.</p>
   <p>This specification defines three <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①①">composite operations</a> as
follows:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation replace" data-noexport id="composite-operation-replace">replace</dfn>
    <dd data-md>
     <p>The result of compositing the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①④">effect value</a> with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑦">underlying value</a> is simply the <span id="ref-for-effect-value①⑤">effect value</span>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation add" data-noexport id="composite-operation-add">add</dfn>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑥">effect value</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition">added</a> to the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑧">underlying
value</a>.
For <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑧">animation types</a> where the <span id="ref-for-addition①">addition operation</span> is defined
such that it is not commutative, the order of the operands is <code><a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value⑨">underlying value</a> + <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑦">effect value</a></code>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="composite operation accumulate" data-noexport id="composite-operation-accumulate">accumulate</dfn>
    <p></p>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value①⑧">effect value</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation">accumulated</a> onto the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⓪">underlying value</a>.
For <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type⑨">animation types</a> where the <span id="ref-for-accumulation①">accumulation operation</span> is
defined such that it is not commutative, the order of the operands
is <span id="ref-for-underlying-value①①">underlying value</span> followed by <span id="ref-for-effect-value①⑨">effect value</span>.</p>
   </dl>
   <h4 class="heading settled" data-level="5.4.5" id="applying-the-composited-result"><span class="secno">5.4.5. </span><span class="content">Applying the composited result</span><a class="self-link" href="#applying-the-composited-result"></a></h4>
   <p>Applying a <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value">composited value</a> to a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑦">target property</a> is achieved by adding a specified value to the CSS cascade.</p>
   <p>The level of the cascade to which this specified value is added
depends on the <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class④">class</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑧">animation</a> <a data-link-type="dfn" href="#associated-animation-of-an-animation-effect" id="ref-for-associated-animation-of-an-animation-effect">associated with</a> the
effect with the highest composite order in the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack⑨">effect stack</a> for a given
property.
By default, the specified value is added to the ‘Animation
declarations’ level of the cascade (<a data-link-type="biblio" href="#biblio-css-cascade-3">[css-cascade-3]</a>).</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>For example, if the effect with the highest composite order is associated with
a ‘CSS transition’-class animation, the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value①">composited value</a> will be added to ‘Transition declarations’ level of the cascade.</p>
   </div>
   <p>The <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value②">composited value</a> calculated for a CSS <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑧">target
property</a> is applied using the following process.</p>
   <ol>
    <li data-md>
     <p>Calculate the <var>base value</var> of the property as
the value generated for that property by computing the computed value
for that property in the absence of animations.</p>
    <li data-md>
     <p>Establish the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⓪">effect stack</a> for the property (see <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>).</p>
    <li data-md>
     <p>Calculate the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value③">composited value</a> of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①①">effect
stack</a> passing in the <var>base value</var> of the property
as the initial <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①②">underlying value</a> (see <a href="#calculating-the-result-of-an-effect-stack">§ 5.4.3 Calculating the result of an effect stack</a>).</p>
    <li data-md>
     <p>Insert the <a data-link-type="dfn" href="#composited-value" id="ref-for-composited-value④">composited value</a> into the CSS cascade at the
level defined for the <a data-link-type="dfn" href="#animation-class" id="ref-for-animation-class⑤">class</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation④⑨">animation</a> <a data-link-type="dfn" href="#associated-animation-of-an-animation-effect" id="ref-for-associated-animation-of-an-animation-effect①">associated with</a> the
effect at the top of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①②">effect stack</a> established for the target
property.</p>
   </ol>
   <h3 class="heading settled" data-level="5.5" id="replacing-animations"><span class="secno">5.5. </span><span class="content">Replacing animations</span><a class="self-link" href="#replacing-animations"></a></h3>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Using the programming interface defined in this specification, it is possible to
repeatedly trigger new animations that contribute to an element’s animated style
indefinitely.</p>
    <p>For example, consider the following code:</p>
    <div class="example" id="example-e639300d">
     <a class="self-link" href="#example-e639300d"></a>
<pre class="lang-javascript highlight">elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'mousemove'</c-><c- p>,</c-> evt <c- p>=></c-> <c- p>{</c->
  circle<c- p>.</c->animate<c- p>(</c->
    <c- p>{</c-> transform<c- o>:</c-> <code class="highlight">translate<c- p><c- p>(</c-></c->$<c- p><c- p>{</c-></c->evt<c- p><c- p>.</c-></c->clientX<c- p><c- p>}</c-></c->px<c- p><c- p>,</c-></c-> $<c- p><c- p>{</c-></c->evt<c- p><c- p>.</c-></c->clientY<c- p><c- p>}</c-></c->px<c- p><c- p>)</c-></c-></code> <c- p>},</c->
    <c- p>{</c-> duration<c- o>:</c-> <c- mi>500</c-><c- p>,</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>}</c->
  <c- p>);</c->
<c- p>});</c->
</pre>
    </div>
    <p>This will generate a new forwards-filling animation each time the mouse is
moved, quickly producing hundreds, even thousands of forwards-filling
animations.</p>
    <p>If the user agent is required to retain <em>all</em> such animations,
the list of animations would grow in an unbounded fashion,
producing a memory leak.</p>
    <p>This section defines a mechanism that causes overridden animations to be
automatically removed unless the author explicitly requests they be retained.</p>
   </div>
   <h4 class="heading settled" data-level="5.5.1" id="animation-replace-state"><span class="secno">5.5.1. </span><span class="content">Replace state</span><a class="self-link" href="#animation-replace-state"></a></h4>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⓪">animation</a> maintains a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="replace-state">replace state</dfn> that may be one of the
following values:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="active replace state" data-noexport id="active-replace-state">active</dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="removed replace state" data-noexport id="removed-replace-state">removed</dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="persisted replace state" data-noexport id="persisted-replace-state">persisted</dfn></p>
   </ul>
   <p>The initial value of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤①">animation</a>'s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state">replace state</a> is <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state">active</a>.</p>
   <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦③">animation effects</a> of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤②">animation</a> whose <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state①">replace state</a> is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state">removed</a> are not included in the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①③">effect stacks</a> of their <a data-link-type="dfn" href="#target-property" id="ref-for-target-property⑨">target properties</a>.</p>
   <h4 class="heading settled" data-level="5.5.2" id="removing-replaced-animations"><span class="secno">5.5.2. </span><span class="content">Removing replaced animations</span><a class="self-link" href="#removing-replaced-animations"></a></h4>
   <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤③">animation</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="replaceable" data-lt="replaceable animation" data-noexport id="replaceable-animation">replaceable</dfn> if <em>all</em> of the following conditions are true:</p>
   <ul>
    <li data-md>
     <p>The existence of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤④">animation</a> is <em>not</em> prescribed by markup.
That is, it is <em>not</em> a CSS animation with an <a data-link-type="dfn" href="https://drafts.csswg.org/css-animations-2/#owning-element" id="ref-for-owning-element">owning element</a>,
nor a CSS transition with an <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-2/#owning-element" id="ref-for-owning-element①">owning element</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑤">animation</a>'s <a data-link-type="dfn" href="#play-state" id="ref-for-play-state⑦">play state</a> is <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①④">finished</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑥">animation</a>'s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state②">replace state</a> is <em>not</em> <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state①">removed</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑦">animation</a> is associated with a <a data-link-type="dfn" href="#monotonically-increasing-timeline" id="ref-for-monotonically-increasing-timeline①">monotonically increasing</a> <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑧">timeline</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑧">animation</a> has an <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②④">associated effect</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑤⑨">animation</a>'s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②⑤">associated effect</a> is <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect④">in effect</a>.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⓪">animation</a>'s <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②⑥">associated effect</a> has an <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target⑥">effect target</a>.</p>
   </ul>
   <p>When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="remove-replaced-animations">remove replaced animations</dfn> for a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code>, <var>doc</var>,
then for every <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥①">animation</a>, <var>animation</var>, that:</p>
   <ul>
    <li data-md>
     <p>has an <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation⑧">associated</a> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦④">animation effect</a> whose <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target⑦">effect target</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a> of <var>doc</var>, and</p>
    <li data-md>
     <p>is <a data-link-type="dfn" href="#replaceable-animation" id="ref-for-replaceable-animation">replaceable</a>, and</p>
    <li data-md>
     <p>has a <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state③">replace state</a> of <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state①">active</a>, and</p>
    <li data-md>
     <p>for which there exists for each <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①⓪">target property</a> of every <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑤">animation effect</a> <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation⑨">associated</a> with <var>animation</var>,
an <span id="ref-for-animation-effect⑦⑥">animation effect</span> associated with a <a data-link-type="dfn" href="#replaceable-animation" id="ref-for-replaceable-animation①">replaceable</a> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥②">animation</a> with a higher <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order①">composite order</a> than <var>animation</var> that includes the same <span id="ref-for-target-property①①">target property</span></p>
   </ul>
   <p>perform the following steps:</p>
   <ol>
    <li data-md>
     <p>Set <var>animation</var>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state④">replace state</a> to <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state②">removed</a>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create②">Create</a> an <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent②">AnimationPlaybackEvent</a></code>, <var>removeEvent</var>.</p>
    <li data-md>
     <p>Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type②">type</a></code> attribute to <a data-link-type="dfn" href="#remove-event" id="ref-for-remove-event">remove</a>.</p>
    <li data-md>
     <p>Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime②">currentTime</a></code> attribute
 to the <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤⑥">current time</a> of <var>animation</var>.</p>
    <li data-md>
     <p>Set <var>removeEvent</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime③">timelineTime</a></code> attribute to the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑦">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline④⑨">timeline</a> with which <var>animation</var> is associated.</p>
    <li data-md>
     <p>If <var>animation</var> has a <a data-link-type="dfn" href="#document-for-timing" id="ref-for-document-for-timing⑤">document for timing</a>, then append <var>removeEvent</var> to its <span id="ref-for-document-for-timing⑥">document for timing</span>'s <a data-link-type="dfn" href="#pending-animation-event-queue" id="ref-for-pending-animation-event-queue④">pending animation event queue</a> along with its target, <var>animation</var>.
 For the <a data-link-type="dfn" href="#scheduled-event-time" id="ref-for-scheduled-event-time⑥">scheduled event time</a>, use the result of
 applying the procedure to convert <a data-link-type="dfn" href="#timeline-time-to-origin-relative-time" id="ref-for-timeline-time-to-origin-relative-time④">timeline time to origin-relative time</a> to
 the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑧">current time</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⓪">timeline</a> with which <var>animation</var> is associated.</p>
     <p>Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch③">dispatch</a> <var>removeEvent</var> at <var>animation</var>.
 The task source for this task is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source②">DOM manipulation task
 source</a>.</p>
   </ol>
   <h3 class="heading settled" data-level="5.6" id="side-effects-section"><span class="secno">5.6. </span><span class="content">Side effects of animation</span><a class="self-link" href="#side-effects-section"></a></h3>
   <p>For every property targeted by at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑦">animation effect</a> that is <a data-link-type="dfn" href="#current" id="ref-for-current①">current</a> or <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect⑤">in effect</a>,
and which is associated with an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥③">animation</a> whose <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑤">replace state</a> is <em>not</em> <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state③">removed</a>,
the user agent must act as if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-will-change-1/#propdef-will-change" id="ref-for-propdef-will-change">will-change</a> property (<a data-link-type="biblio" href="#biblio-css-will-change-1">[css-will-change-1]</a>) on the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target⑧">effect target</a> includes the property.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>As a result of the above requirement, if an animation targets, for example,
the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> property of an element, a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context">stacking context</a> will be
created for the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target⑨">effect target</a> so long as the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥④">animation</a> is in
the <a data-link-type="dfn" href="#before-phase" id="ref-for-before-phase⑧">before phase</a>, the <a data-link-type="dfn" href="#active-phase" id="ref-for-active-phase⑦">active phase</a> or, if it has a <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode⑨">fill
mode</a> of ‘forwards’ or ‘both’, the <a data-link-type="dfn" href="#after-phase" id="ref-for-after-phase⑨">after
phase</a>.</p>
   </div>
   <h2 class="heading settled" data-level="6" id="programming-interface"><span class="secno">6. </span><span class="content">Programming interface</span><a class="self-link" href="#programming-interface"></a></h2>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>In addition to the abstract model described above, Web Animations also
defines a programming interface to the model.
This interface can be used to inspect and extend animations produced
by declarative means or for directly producing animations when
a procedural approach is more suitable.</p>
   </div>
   <h3 class="heading settled" data-level="6.1" id="time-values-in-the-programming-interface"><span class="secno">6.1. </span><span class="content">Time values in the programming interface</span><a class="self-link" href="#time-values-in-the-programming-interface"></a></h3>
   <p><a data-link-type="dfn" href="#time-value" id="ref-for-time-value④②">Time values</a> are represented in the programming interface with
the type <code>double</code>. <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪①">Unresolved</a> time values are
represented by the value <code>null</code>.</p>
   <h3 class="heading settled" data-level="6.2" id="the-animationtimeline-interface"><span class="secno">6.2. </span><span class="content">The <code>AnimationTimeline</code> interface</span><a class="self-link" href="#the-animationtimeline-interface"></a></h3>
   <p><a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤①">Timelines</a> are represented in the Web Animations API by the <code class="idl"><a data-link-type="idl" href="#animationtimeline" id="ref-for-animationtimeline">AnimationTimeline</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationtimeline"><code><c- g>AnimationTimeline</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationtimeline-currenttime" id="ref-for-dom-animationtimeline-currenttime"><c- g>currentTime</c-></a>;
};
</pre>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline" data-dfn-type="attribute" data-export id="dom-animationtimeline-currenttime"><code>currentTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①">double</a>, readonly, nullable</span>
     <dd data-md>
      <p>Returns the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time⑨">current time</a> for this timeline
or <code>null</code> if this timeline is <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⑧">inactive</a>.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.3" id="the-documenttimeline-interface"><span class="secno">6.3. </span><span class="content">The <code>DocumentTimeline</code> interface</span><a class="self-link" href="#the-documenttimeline-interface"></a></h3>
   <p><a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline⑤">Document timelines</a>, including the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline④">default document
timeline</a>, are represented in the Web Animations API by the <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline">DocumentTimeline</a></code> interface.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-documenttimelineoptions"><code><c- g>DocumentTimelineOptions</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="DOMHighResTimeStamp " href="#dom-documenttimelineoptions-origintime" id="ref-for-dom-documenttimelineoptions-origintime"><c- g>originTime</c-></a> = 0;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="documenttimeline"><code><c- g>DocumentTimeline</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline①"><c- n>AnimationTimeline</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-documenttimeline-documenttimeline" id="ref-for-dom-documenttimeline-documenttimeline"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-documenttimelineoptions" id="ref-for-dictdef-documenttimelineoptions"><c- n>DocumentTimelineOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-documenttimeline-documenttimeline-options-options" id="ref-for-dom-documenttimeline-documenttimeline-options-options"><c- g>options</c-></a> = {});
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimelineOptions" data-dfn-type="dict-member" data-export id="dom-documenttimelineoptions-origintime"><code>originTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://w3c.github.io/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①">DOMHighResTimeStamp</a>, defaulting to <code>0</code></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#origin-time" id="ref-for-origin-time②">origin time</a> for the timeline specified as a real number of
milliseconds relative to the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#time-origin" id="ref-for-time-origin④">time origin</a>.</p>
    </dl>
   </div>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimeline" data-dfn-type="constructor" data-export data-lt="DocumentTimeline(options)|constructor(options)|DocumentTimeline()|constructor()" id="dom-documenttimeline-documenttimeline"><code>DocumentTimeline (options)</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline①">DocumentTimeline</a></code>.
The <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> with which the timeline is associated is the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object②">current global object</a>.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentTimeline/DocumentTimeline(options)" data-dfn-type="argument" data-export id="dom-documenttimeline-documenttimeline-options-options"><code>options</code></dfn>
        <dd data-md>
         <p>Configuration parameters for the newly-created timeline.
This specification defines only the <code class="idl"><a data-link-type="idl" href="#dom-documenttimelineoptions-origintime" id="ref-for-dom-documenttimelineoptions-origintime①">originTime</a></code> member but other specifications
may extend this set.</p>
       </dl>
      </div>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.4" id="the-animation-interface"><span class="secno">6.4. </span><span class="content">The <code>Animation</code> interface</span><a class="self-link" href="#the-animation-interface"></a></h3>
   <p><a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑤">Animations</a> are represented in the Web Animations
API by the <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation">Animation</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animation"><code><c- g>Animation</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-animation-animation" id="ref-for-dom-animation-animation"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-effect" id="ref-for-dom-animation-animation-effect-timeline-effect"><c- g>effect</c-></a> = <c- b>null</c->,
                <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline②"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-timeline" id="ref-for-dom-animation-animation-effect-timeline-timeline"><c- g>timeline</c-></a>);
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a>                <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-animation-id" id="ref-for-dom-animation-id"><c- g>id</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect①"><c- n>AnimationEffect</c-></a>?         <a class="idl-code" data-link-type="attribute" data-type="AnimationEffect?" href="#dom-animation-effect" id="ref-for-dom-animation-effect"><c- g>effect</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline③"><c- n>AnimationTimeline</c-></a>?       <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationTimeline?" href="#dom-animation-timeline" id="ref-for-dom-animation-timeline"><c- g>timeline</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a>?                  <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-animation-starttime" id="ref-for-dom-animation-starttime"><c- g>startTime</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a>?                  <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-animation-currenttime" id="ref-for-dom-animation-currenttime"><c- g>currentTime</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a>                   <a class="idl-code" data-link-type="attribute" data-type="double" href="#dom-animation-playbackrate" id="ref-for-dom-animation-playbackrate"><c- g>playbackRate</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate"><c- n>AnimationPlayState</c-></a>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationPlayState" href="#dom-animation-playstate" id="ref-for-dom-animation-playstate"><c- g>playState</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate"><c- n>AnimationReplaceState</c-></a>    <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationReplaceState" href="#dom-animation-replacestate" id="ref-for-dom-animation-replacestate"><c- g>replaceState</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a>                  <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-animation-pending" id="ref-for-dom-animation-pending"><c- g>pending</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation①"><c- n>Animation</c-></a>>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-ready" id="ref-for-dom-animation-ready"><c- g>ready</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation②"><c- n>Animation</c-></a>>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-finished" id="ref-for-dom-animation-finished"><c- g>finished</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onfinish" id="ref-for-dom-animation-onfinish"><c- g>onfinish</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-oncancel" id="ref-for-dom-animation-oncancel"><c- g>oncancel</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onremove" id="ref-for-dom-animation-onremove"><c- g>onremove</c-></a>;
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-cancel" id="ref-for-dom-animation-cancel"><c- g>cancel</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-finish" id="ref-for-dom-animation-finish①"><c- g>finish</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-play" id="ref-for-dom-animation-play"><c- g>play</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-pause" id="ref-for-dom-animation-pause"><c- g>pause</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-updateplaybackrate" id="ref-for-dom-animation-updateplaybackrate"><c- g>updatePlaybackRate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate" id="ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate"><c- g>playbackRate</c-></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-reverse" id="ref-for-dom-animation-reverse"><c- g>reverse</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-persist" id="ref-for-dom-animation-persist"><c- g>persist</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-commitstyles" id="ref-for-dom-animation-commitstyles"><c- g>commitStyles</c-></a>();
};
</pre>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="constructor" data-export data-lt="Animation(effect, timeline)|constructor(effect, timeline)|Animation(effect)|constructor(effect)|Animation()|constructor()" id="dom-animation-animation"><code>Animation (effect, timeline)</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation③">Animation</a></code> object using the following procedure.</p>
      <ol>
       <li data-md>
        <p>Let <var>animation</var> be a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation④">Animation</a></code> object.</p>
       <li data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#set-the-timeline-of-an-animation" id="ref-for-set-the-timeline-of-an-animation">set the timeline of an animation</a> on <var>animation</var> passing <var>timeline</var> as the <var>new
timeline</var> or, if a <var>timeline</var> argument is missing,
passing the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline⑤">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window①">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object③">current global object</a>.</p>
       <li data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#set-the-associated-effect-of-an-animation" id="ref-for-set-the-associated-effect-of-an-animation①">set the associated effect of an animation</a> on <var>animation</var> passing <var>source</var> as the <var>new
effect</var>.</p>
      </ol>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/Animation(effect, timeline)" data-dfn-type="argument" data-export id="dom-animation-animation-effect-timeline-effect"><code>effect</code></dfn>
        <dd data-md>
         <p>An optional value which, if not null, specifies the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②⑦">associated
effect</a> to assign to the newly created <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑥">animation</a>.</p>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/Animation(effect, timeline)" data-dfn-type="argument" data-export id="dom-animation-animation-effect-timeline-timeline"><code>timeline</code></dfn>
        <dd data-md>
         <p>An optional value which, if present, specifies the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤②">timeline</a> with which to associate the newly-created <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑦">animation</a>.
If missing, the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline⑥">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①⓪">Document</a></code> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window" id="ref-for-concept-document-window②">associated</a> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object④">current global object</a> is used.</p>
       </dl>
      </div>
    </dl>
   </div>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-id"><code>id</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a></span>
     <dd data-md>
      <p>A string used to identify the animation.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-effect"><code>effect</code></dfn>, <span> of type <a data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect②">AnimationEffect</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect②⑧">associated effect</a> of this animation.
Setting this attribute updates the object’s <span id="ref-for-associated-effect②⑨">associated effect</span> using
the procedure to <a data-link-type="dfn" href="#set-the-associated-effect-of-an-animation" id="ref-for-set-the-associated-effect-of-an-animation②">set the associated effect of an animation</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-timeline"><code>timeline</code></dfn>, <span> of type <a data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline④">AnimationTimeline</a>, readonly, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤③">timeline</a> associated with this animation.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-starttime"><code>startTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥">double</a>, nullable</span>
     <dd data-md>
      <p>Returns the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④③">start time</a> of this animation.
Setting this attribute updates the <span id="ref-for-start-time④④">start time</span> using
the procedure to <a data-link-type="dfn" href="#set-the-start-time" id="ref-for-set-the-start-time①">set the start time</a> of this object
to the new value.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-currenttime"><code>currentTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦">double</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤⑦">current time</a> of this animation.
Setting this attribute follows the procedure to <a data-link-type="dfn" href="#set-the-current-time" id="ref-for-set-the-current-time③">set the current time</a> of this object to the new value.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-playbackrate"><code>playbackRate</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧">double</a></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate③⑨">playback rate</a> of this animation.
Setting this attribute follows the procedure to <a data-link-type="dfn" href="#set-the-playback-rate" id="ref-for-set-the-playback-rate②">set the playback rate</a> of this object to the new value.</p>
      <div class="note" role="note">
       <p>Setting this attribute performs a synchronous update to the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⓪">playback
rate</a> meaning that it does not make any attempt to synchronize with the
playback state of animations running on a separate process or thread.
As a result, setting the <code class="idl"><a data-link-type="idl" href="#dom-animation-playbackrate" id="ref-for-dom-animation-playbackrate①">playbackRate</a></code> for an in-flight
animation may cause it to jump.</p>
       <p>To set the the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④①">playback rate</a> for an in-flight animation such that it
smoothly updates, use the asynchronous <code class="idl"><a data-link-type="idl" href="#dom-animation-updateplaybackrate" id="ref-for-dom-animation-updateplaybackrate①">updatePlaybackRate()</a></code> method.</p>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-playstate"><code>playState</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate①">AnimationPlayState</a>, readonly</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#play-state" id="ref-for-play-state⑧">play state</a> of this animation.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-replacestate"><code>replaceState</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate①">AnimationReplaceState</a>, readonly</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑥">replace state</a> of this animation.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-pending"><code>pending</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①">boolean</a>, readonly</span>
     <dd data-md>
      <p>Returns true if this animation has a <a data-link-type="dfn" href="#pending-play-task" id="ref-for-pending-play-task①⑧">pending play task</a> or
a <a data-link-type="dfn" href="#pending-pause-task" id="ref-for-pending-pause-task①⑧">pending pause task</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-ready"><code>ready</code></dfn>, <span> of type Promise&lt;<a data-link-type="idl-name" href="#animation" id="ref-for-animation⑤">Animation</a>>, readonly</span>
     <dd data-md>
      <p>Returns the <a data-link-type="dfn" href="#current-ready-promise" id="ref-for-current-ready-promise①⑥">current ready promise</a> for this object.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-finished"><code>finished</code></dfn>, <span> of type Promise&lt;<a data-link-type="idl-name" href="#animation" id="ref-for-animation⑥">Animation</a>>, readonly</span>
     <dd data-md>
      <p>Returns the <a data-link-type="dfn" href="#current-finished-promise" id="ref-for-current-finished-promise①①">current finished promise</a> for this object.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-onfinish"><code>onfinish</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③">EventHandler</a></span>
     <dd data-md>
      <p>The event handler for the <a data-link-type="dfn" href="#finish-event" id="ref-for-finish-event②">finish event</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-oncancel"><code>oncancel</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④">EventHandler</a></span>
     <dd data-md>
      <p>The event handler for the <a data-link-type="dfn" href="#cancel-event" id="ref-for-cancel-event③">cancel event</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-onremove"><code>onremove</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤">EventHandler</a></span>
     <dd data-md>
      <p>The event handler for the <a data-link-type="dfn" href="#remove-event" id="ref-for-remove-event①">remove event</a>.</p>
    </dl>
   </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="cancel()" id="dom-animation-cancel"><code>void cancel()</code></dfn>
     <dd data-md>
      <p>Clears all effects caused by this animation and aborts its playback
by running the <a data-link-type="dfn" href="#cancel-an-animation" id="ref-for-cancel-an-animation②">cancel an animation</a> procedure for this object.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="finish()" id="dom-animation-finish"><code>void finish()</code></dfn>
     <dd data-md>
      <p>Seeks the animation to the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑤">associated effect end</a> in the
current direction by running the <a data-link-type="dfn" href="#finish-an-animation" id="ref-for-finish-an-animation②">finish an animation</a> procedure
for this object.</p>
      <div class="exceptions">
       <dl>
        <dt data-md>DOMException of type <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>
        <dd data-md>
         <p>Raised if this animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④②">playback rate</a> is zero, or if this
animation’s <span id="ref-for-playback-rate④③">playback rate</span> is > zero and the <a data-link-type="dfn" href="#associated-effect-end" id="ref-for-associated-effect-end①⑥">associated effect end</a> is infinity.</p>
       </dl>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="play()" id="dom-animation-play"><code>void play()</code></dfn>
     <dd data-md>
      <p>Begins or resumes playback of the animation by running the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation④">play an animation</a> passing true as the value of the <var>auto-rewind</var> flag.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="pause()" id="dom-animation-pause"><code>void pause()</code></dfn>
     <dd data-md>
      <p>Suspends the playback of this animation by running the procedure to <a data-link-type="dfn" href="#pause-an-animation" id="ref-for-pause-an-animation">pause an animation</a> for this object.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="updatePlaybackRate(playbackRate)" id="dom-animation-updateplaybackrate"><code>void updatePlaybackRate(playbackRate)</code></dfn>
     <dd data-md>
      <p>Performs an asynchronous update of the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④④">playback rate</a> of this
animation by performing the <a data-link-type="dfn" href="#seamlessly-update-the-playback-rate" id="ref-for-seamlessly-update-the-playback-rate">seamlessly update the playback rate</a> procedure, passing <code class="idl"><a data-link-type="idl" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate" id="ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate①">playbackRate</a></code> as the <var>new
playback rate</var>.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation/updatePlaybackRate(playbackRate)" data-dfn-type="argument" data-export id="dom-animation-updateplaybackrate-playbackrate-playbackrate"><code>playbackRate</code></dfn>
        <dd data-md>
         <p>A finite real number specifying the updated playback rate to use.</p>
       </dl>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="reverse()" id="dom-animation-reverse"><code>void reverse()</code></dfn>
     <dd data-md>
      <p>Inverts the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⑤">playback rate</a> of this animation and plays it using the <a data-link-type="dfn" href="#reverse-an-animation" id="ref-for-reverse-an-animation">reverse an animation</a> procedure for this object.
As with <a class="idl-code" data-link-type="method" href="#dom-animation-play" id="ref-for-dom-animation-play①">play()</a>, this
method unpauses the animation and, if the animation has already finished
playing in the reversed direction, seeks to the start of the <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect③⓪">associated
effect</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="persist()" id="dom-animation-persist"><code>void persist()</code></dfn>
     <dd data-md>
      <p>Sets this animation’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑦">replace state</a> to <a data-link-type="dfn" href="#persisted-replace-state" id="ref-for-persisted-replace-state">persisted</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="method" data-export data-lt="commitStyles()" id="dom-animation-commitstyles"><code>void commitStyles()</code></dfn>
     <dd data-md>
      <p>Writes the current <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②⓪">effect values</a> produced by this animation’s <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑧">animation effects</a> to their corresponding <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①⓪">effect targets</a>' inline style
using the <a data-link-type="dfn" href="#commit-computed-styles" id="ref-for-commit-computed-styles">commit computed styles</a> procedure.</p>
      <p>Unlike most other methods defined on this interface, calling this method <em>does</em> trigger a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event">style change event</a> (see <a href="#model-liveness">§ 6.13 Model liveness</a>).</p>
      <div class="note" role="note">
       <p>Since the procedure to <a data-link-type="dfn" href="#commit-computed-styles" id="ref-for-commit-computed-styles①">commit computed styles</a> includes the <a data-link-type="dfn" href="#effect-value" id="ref-for-effect-value②①">effect values</a> for the animation even if it is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state④">removed</a>,
  this method is useful for retaining the effect of an animation
  after it has been replaced (see <a href="#removing-replaced-animations">§ 5.5.2 Removing replaced animations</a>)
  without retaining the actual animation.</p>
       <p>Note that the values committed are the <em>computed</em> values
  produced by the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑦⑨">animation effects</a> at the time when this method is
  called.
  Since these values are computed values, they do not reflect to changes to
  context such as responding to changes to CSS variables or
  recalculating em units based on changes to the computed <span class="css">font-size</span> in the way the values produced by a live animation would.</p>
       <p>In order to retain full fidelty of a filling animation’s result after it
  has been replaced (see <a href="#replacing-animations">§ 5.5 Replacing animations</a>),
  the <code class="idl"><a data-link-type="idl" href="#dom-animation-persist" id="ref-for-dom-animation-persist①">persist()</a></code> method may be used,
  but note that doing so will mean the animation continues to consume
  resources.</p>
      </div>
    </dl>
   </div>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="commit-computed-styles">commit computed styles</dfn> for an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑧">animation</a>, <var>animation</var>:</p>
   <ol>
    <li data-md>
     <p>Let <var>targets</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">set</a> of all <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①①">effect targets</a> for <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⓪">animation effects</a> <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①⓪">associated</a> with <var>animation</var>.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>target</var> in <var>targets</var>:</p>
     <ol>
      <li data-md>
       <p>If <var>target</var> is not an element capable of having a <a data-link-type="dfn" href="https://drafts.csswg.org/css-style-attr/#style-attribute" id="ref-for-style-attribute">style
  attribute</a> <a data-link-type="biblio" href="#biblio-css-style-attr">[CSS-STYLE-ATTR]</a> (for example, it is a pseudo-element or is an element in
  a document format for which style attributes are not defined) <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#nomodificationallowederror" id="ref-for-nomodificationallowederror">NoModificationAllowedError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code> and abort these steps.</p>
      <li data-md>
       <p>If, after applying any pending style changes, <var>target</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered" id="ref-for-being-rendered">being rendered</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑥">throw</a> an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror⑤">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code> and abort these steps.</p>
       <div class="issue" id="issue-8f3b970c">
        <a class="self-link" href="#issue-8f3b970c"></a> 
        <p>The definition of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered" id="ref-for-being-rendered①">being rendered</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a> with regards to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display: contents</a> is still <a href="https://github.com/whatwg/html/issues/1837">under discussion</a>.
  For the purpose of this procedure, we assume that an
  element with <span class="css" id="ref-for-propdef-display①">display: contents</span> that otherwise would have
  associated layout boxes (i.e. it is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a> and not part of
  a <span class="css" id="ref-for-propdef-display②">display: none</span> subtree) <em>is</em> being rendered.</p>
       </div>
      <li data-md>
       <p>Let <var>inline style</var> be the result of getting the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#css-declaration-block" id="ref-for-css-declaration-block">CSS declaration block</a> corresponding to <var>target</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-style-attr/#style-attribute" id="ref-for-style-attribute①">style attribute</a>.
  If <var>target</var> does not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element-attribute-has" id="ref-for-concept-element-attribute-has">have</a> a <span id="ref-for-style-attribute②">style attribute</span>,
  let <var>inline style</var> be a new empty <span id="ref-for-css-declaration-block①">CSS declaration block</span> with
  the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-readonly-flag" id="ref-for-cssstyledeclaration-readonly-flag">readonly flag</a> unset and <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node" id="ref-for-cssstyledeclaration-owner-node">owner node</a> set to <var>target</var>.</p>
      <li data-md>
       <p>Let <var>targeted properties</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set①">set</a> of physical longhand properties
  that are a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①②">target property</a> for at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧①">animation effect</a> <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①①">associated</a> with <var>animation</var> whose <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①②">effect target</a> is <var>target</var>.</p>
      <li data-md>
       <p>For each property, <var>property</var>, in <var>targeted properties</var>:</p>
       <ol>
        <li data-md>
         <p>Let <var>partialEffectStack</var> be a copy of the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①④">effect stack</a> for <var>property</var> on <var>target</var>.</p>
        <li data-md>
         <p>If <var>animation</var>’s <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑧">replace state</a> is <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑤">removed</a>,
   add all <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧②">animation effects</a> <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①②">associated</a> with <var>animation</var> whose <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①③">effect target</a> is <var>target</var> and which include <var>property</var> as a <a data-link-type="dfn" href="#target-property" id="ref-for-target-property①③">target property</a> to <var>partialEffectStack</var>.</p>
        <li data-md>
         <p>Remove from <var>partialEffectStack</var> any <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧③">animation effects</a> whose <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①③">associated</a> <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑥⑨">animation</a> has a higher <a data-link-type="dfn" href="#animation-composite-order" id="ref-for-animation-composite-order②">composite order</a> than <var>animation</var>.</p>
        <li data-md>
         <p>Let <var>effect value</var> be the result of calculating the result of <var>partialEffectStack</var> for <var>property</var> using <var>target</var>’s computed
   style (see <a href="#calculating-the-result-of-an-effect-stack">§ 5.4.3 Calculating the result of an effect stack</a>).</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#set-a-css-declaration" id="ref-for-set-a-css-declaration">Set a CSS declaration</a> <var>property</var> for <var>effect value</var> in <var>inline style</var>.</p>
       </ol>
      <li data-md>
       <p><a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#update-style-attribute-for" id="ref-for-update-style-attribute-for">Update style attribute for</a> <var>inline style</var>.</p>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="6.4.1" id="the-animationplaystate-enumeration"><span class="secno">6.4.1. </span><span class="content">The <code>AnimationPlayState</code> enumeration</span><a class="self-link" href="#the-animationplaystate-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-animationplaystate"><code><c- g>AnimationPlayState</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export id="dom-animationplaystate-idle"><code><c- s>"idle"</c-></code><a class="self-link" href="#dom-animationplaystate-idle"></a></dfn>, <dfn class="idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export id="dom-animationplaystate-running"><code><c- s>"running"</c-></code><a class="self-link" href="#dom-animationplaystate-running"></a></dfn>, <dfn class="idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export id="dom-animationplaystate-paused"><code><c- s>"paused"</c-></code><a class="self-link" href="#dom-animationplaystate-paused"></a></dfn>, <dfn class="idl-code" data-dfn-for="AnimationPlayState" data-dfn-type="enum-value" data-export id="dom-animationplaystate-finished"><code><c- s>"finished"</c-></code><a class="self-link" href="#dom-animationplaystate-finished"></a></dfn> };
</pre>
   <dl>
    <dt data-md><code>idle</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state⑥">idle play state</a>.</p>
    <dt data-md><code>running</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#running-play-state" id="ref-for-running-play-state②">running play state</a>.</p>
    <dt data-md><code>paused</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#paused-play-state" id="ref-for-paused-play-state⑦">paused play state</a>.</p>
    <dt data-md><code>finished</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#finished-play-state" id="ref-for-finished-play-state①⑤">finished play state</a>.</p>
   </dl>
   <h4 class="heading settled" data-level="6.4.2" id="the-animationreplacestate-enumeration"><span class="secno">6.4.2. </span><span class="content">The <code>AnimationReplaceState</code> enumeration</span><a class="self-link" href="#the-animationreplacestate-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-animationreplacestate"><code><c- g>AnimationReplaceState</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-active"><code><c- s>"active"</c-></code><a class="self-link" href="#dom-animationreplacestate-active"></a></dfn>, <dfn class="idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-removed"><code><c- s>"removed"</c-></code><a class="self-link" href="#dom-animationreplacestate-removed"></a></dfn>, <dfn class="idl-code" data-dfn-for="AnimationReplaceState" data-dfn-type="enum-value" data-export id="dom-animationreplacestate-persisted"><code><c- s>"persisted"</c-></code><a class="self-link" href="#dom-animationreplacestate-persisted"></a></dfn> };
</pre>
   <dl>
    <dt data-md><code>active</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#active-replace-state" id="ref-for-active-replace-state②">active replace state</a>.</p>
    <dt data-md><code>removed</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑥">removed replace state</a>.</p>
    <dt data-md><code>persisted</code>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#persisted-replace-state" id="ref-for-persisted-replace-state①">persisted replace state</a>.</p>
   </dl>
   <h3 class="heading settled" data-level="6.5" id="the-animationeffect-interface"><span class="secno">6.5. </span><span class="content">The <code>AnimationEffect</code> interface</span><a class="self-link" href="#the-animationeffect-interface"></a></h3>
   <p><a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧④">Animation effects</a> are represented in the Web Animations API by the
abstract <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect③">AnimationEffect</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationeffect"><code><c- g>AnimationEffect</c-></code></dfn> {
    <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming"><c- n>EffectTiming</c-></a>         <a class="idl-code" data-link-type="method" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming"><c- g>getTiming</c-></a>();
    <a class="n" data-link-type="idl-name" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming"><c- g>getComputedTiming</c-></a>();
    <c- b>void</c->                 <a class="idl-code" data-link-type="method" href="#dom-animationeffect-updatetiming" id="ref-for-dom-animationeffect-updatetiming"><c- g>updateTiming</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming"><c- n>OptionalEffectTiming</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing"><c- g>timing</c-></a> = {});
};
</pre>
   <div class="note" role="note"> In future, we may expose <code>any onupdate (double? progress,
double currentIteration, Animatable? target, any
underlyingValue)</code> so that the animation effects can be driven
apart from the timing model. </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export id="dom-animationeffect-gettiming"><code>getTiming()</code></dfn>
     <dd data-md>
      <p>Returns the specified timing properties for this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑤">animation effect</a>.</p>
      <p>For the correspondance between the members of the returned <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①">EffectTiming</a></code> object and properties of the <a href="#timing-model">timing model</a>, see the
the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming②">EffectTiming</a></code> interface.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export id="dom-animationeffect-getcomputedtiming"><code>getComputedTiming()</code></dfn>
     <dd data-md>
      <p>Returns the calculated timing properties for this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑥">animation
effect</a>.</p>
      <p>Although some of the attributes of the object returned by <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming①">getTiming()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming①">getComputedTiming()</a></code> are common, their values may differ in the following ways:</p>
      <ul>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration">duration</a></code> – while <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming②">getTiming()</a></code> may return the string <code>auto</code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming②">getComputedTiming()</a></code> must return a number
corresponding to the calculated value of the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①③">iteration duration</a> as defined in the description of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration①">duration</a></code> member of
the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming③">EffectTiming</a></code> interface.</p>
        <p>In this level of the specification, that simply means that an <code>auto</code> value is replaced by zero.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill">fill</a></code> – likewise, while <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming③">getTiming()</a></code> may return the string <code>auto</code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming③">getComputedTiming()</a></code> must return the specific <a class="idl-code" data-link-type="enum" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode">FillMode</a> used for timing calculations as defined
in the description of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill①">fill</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming④">EffectTiming</a></code> interface.</p>
        <p>In this level of the specification, that simply means that an <code>auto</code> value is replaced by the <code>none</code> <a class="idl-code" data-link-type="enum" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode①">FillMode</a>.</p>
      </ul>
      <p class="note" role="note"><span>Note:</span> It is likely that other timing members may be extended in future to
include <code>auto</code>-like values. When performing timing calculations,
authors are encouraged to use <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming④">getComputedTiming()</a></code> where
possible to avoid incompatibility should the range or type of allowed
specified values be changed.</p>
      <p>In addition to possible differences in the values returned,
compared to <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming④">getTiming()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming⑤">getComputedTiming()</a></code> returns additional timing
information as defined by the <code class="idl"><a data-link-type="idl" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming①">ComputedEffectTiming</a></code> dictionary.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect" data-dfn-type="method" data-export data-lt="updateTiming(timing)|updateTiming()" id="dom-animationeffect-updatetiming"><code>updateTiming(timing)</code></dfn>
     <dd data-md>
      <p>Updates the specified timing properties of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑦">animation effect</a> by
performing the procedure to <a data-link-type="dfn" href="#update-the-timing-properties-of-an-animation-effect" id="ref-for-update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation
effect</a> passing the <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing①">timing</a></code> parameter as <var>input</var>.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffect/updateTiming(timing)" data-dfn-type="argument" data-export data-lt="timing" id="dom-animationeffect-updatetiming-timing-timing"><code>optional <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming①">OptionalEffectTiming</a></code> timing</code></dfn>
        <dd data-md>
         <p>The timing properties to update.
The timing properties corresponding to any members not <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present">present</a> on <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing②">timing</a></code> will <em>not</em> be modified.</p>
       </dl>
      </div>
    </dl>
   </div>
   <p class="issue" id="issue-178c6cfa"><a class="self-link" href="#issue-178c6cfa"></a> The <code>remove()</code> method can be used to remove an effect
from either its parent group or animation. Should we keep it in level 1 and
define it simply as removing the animation effect from its animation? <a href="https://github.com/w3c/csswg-drafts/issues/2082">&lt;https://github.com/w3c/csswg-drafts/issues/2082></a></p>
   <h4 class="heading settled" data-level="6.5.1" id="the-effecttiming-dictionaries"><span class="secno">6.5.1. </span><span class="content">The <code>EffectTiming</code> and <code>OptionalEffectTiming</code> dictionaries</span><a class="self-link" href="#the-effecttiming-dictionaries"></a></h4>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑤">EffectTiming</a></code> dictionary represents the timing properties of an <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect④">AnimationEffect</a></code>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming②">OptionalEffectTiming</a></code> dictionary is a variant of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑥">EffectTiming</a></code> dictionary that allows some members to be not <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present①">present</a>.
This is used by the <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-updatetiming" id="ref-for-dom-animationeffect-updatetiming①">updateTiming()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animationeffect" id="ref-for-animationeffect⑤">AnimationEffect</a></code> interface to perform a delta update to the timing properties
of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑧">animation effect</a>.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-effecttiming"><code><c- g>EffectTiming</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a>                             <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay"><c- g>delay</c-></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪"><c- b>double</c-></a>                             <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay"><c- g>endDelay</c-></a> = 0;
    <a class="n" data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode②"><c- n>FillMode</c-></a>                           <a class="idl-code" data-default="&quot;auto&quot;" data-link-type="dict-member" data-type="FillMode                           " href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill②"><c- g>fill</c-></a> = "auto";
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a>                             <a class="idl-code" data-default="0.0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart"><c- g>iterationStart</c-></a> = 0.0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a>                <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="unrestricted double                " href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations"><c- g>iterations</c-></a> = 1.0;
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a>) <a class="idl-code" data-default="&quot;auto&quot;" data-link-type="dict-member" data-type="(unrestricted double or DOMString) " href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration②"><c- g>duration</c-></a> = "auto";
    <a class="n" data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection"><c- n>PlaybackDirection</c-></a>                  <a class="idl-code" data-default="&quot;normal&quot;" data-link-type="dict-member" data-type="PlaybackDirection                  " href="#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction"><c- g>direction</c-></a> = "normal";
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a>                          <a class="idl-code" data-default="&quot;linear&quot;" data-link-type="dict-member" data-type="DOMString                          " href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing"><c- g>easing</c-></a> = "linear";
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-optionaleffecttiming"><code><c- g>OptionalEffectTiming</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-delay" id="ref-for-dom-optionaleffecttiming-delay"><c- g>delay</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-enddelay" id="ref-for-dom-optionaleffecttiming-enddelay"><c- g>endDelay</c-></a>;
    <a class="n" data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode③"><c- n>FillMode</c-></a>                           <a class="idl-code" data-link-type="dict-member" data-type="FillMode                           " href="#dom-optionaleffecttiming-fill" id="ref-for-dom-optionaleffecttiming-fill"><c- g>fill</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-iterationstart" id="ref-for-dom-optionaleffecttiming-iterationstart"><c- g>iterationStart</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②"><c- b>unrestricted</c-> <c- b>double</c-></a>                <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double                " href="#dom-optionaleffecttiming-iterations" id="ref-for-dom-optionaleffecttiming-iterations"><c- g>iterations</c-></a>;
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="dict-member" data-type="(unrestricted double or DOMString) " href="#dom-optionaleffecttiming-duration" id="ref-for-dom-optionaleffecttiming-duration"><c- g>duration</c-></a>;
    <a class="n" data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection①"><c- n>PlaybackDirection</c-></a>                  <a class="idl-code" data-link-type="dict-member" data-type="PlaybackDirection                  " href="#dom-optionaleffecttiming-direction" id="ref-for-dom-optionaleffecttiming-direction"><c- g>direction</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a>                          <a class="idl-code" data-link-type="dict-member" data-type="DOMString                          " href="#dom-optionaleffecttiming-easing" id="ref-for-dom-optionaleffecttiming-easing"><c- g>easing</c-></a>;
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-delay"><code>delay</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑤">double</a>, defaulting to <code>0</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="delay" id="dom-optionaleffecttiming-delay"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑥">start delay</a> which represents
the number of milliseconds from the <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④⑤">start time</a> of the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⓪">animation</a> to the start of the <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑥">active interval</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-enddelay"><code>endDelay</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑥">double</a>, defaulting to <code>0</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="endDelay" id="dom-optionaleffecttiming-enddelay"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay④">end delay</a> which represents the number of milliseconds
from the end of an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑧⑨">animation effect</a>’s <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑦">active interval</a> until its <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑧">end time</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-fill"><code>fill</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode④">FillMode</a>, defaulting to <code>"auto"</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="fill" id="dom-optionaleffecttiming-fill"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⓪">fill mode</a> which defines the behavior of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⓪">animation
effect</a> outside its <a data-link-type="dfn" href="#active-interval" id="ref-for-active-interval①⑧">active interval</a>.</p>
      <p>When performing timing calculations the special string value <code>auto</code> is expanded to one of the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①①">fill modes</a> recognized by
the timing model as follows,</p>
      <div class="switch">
       <dl>
        <dt data-md>If the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨①">animation effect</a> to which the fill mode is being is
applied is a <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect②⑨">keyframe effect</a>,
        <dd data-md>
         <p>Use <span class="enum-value">none</span> as the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①②">fill
mode</a>.</p>
        <dt data-md>Otherwise,
        <dd data-md>
         <p>Use <span class="enum-value">both</span> as the <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①③">fill
mode</a>.</p>
       </dl>
      </div>
      <div class="advisement"> As described in <a href="#fill-behavior">§ 4.6 Fill behavior</a>, authors are discouraged from using
indefinitely filling animations. </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-iterationstart"><code>iterationStart</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑦">double</a>, defaulting to <code>0.0</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="iterationStart" id="dom-optionaleffecttiming-iterationstart"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨②">animation effect</a>’s <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start⑨">iteration start</a> property which is a
finite real number greater than or equal to zero representing the iteration
index at which the animation effect begins and its progress through that
iteration.</p>
      <p>For example, a value of 0.5 indicates that the animation effect begins half
way through its first iteration. A value of 1.2 indicates the animation
effect begins 20% of the way through its second iteration.</p>
      <div class="note" role="note">
        Note that the value of <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations①">iterations</a></code> is effectively <em>added</em> to the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart①">iterationStart</a></code> such that
an animation effect with an <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart②">iterationStart</a></code> of
‘0.5’ and <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations②">iterations</a></code> of
‘2’ will still repeat twice however it will begin
and end half-way through its <a data-link-type="dfn" href="#iteration-interval" id="ref-for-iteration-interval②">iteration interval</a>. 
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart③">iterationStart</a></code> values greater than
or equal to one are typically only useful in combination with an
animation effect that has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation" id="ref-for-iteration-composite-operation①">iteration composite
operation</a> of <span class="enum-value">accumulate</span> or when the <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration④">current iteration</a> index is otherwise significant.</p>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-iterations"><code>iterations</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④">unrestricted double</a>, defaulting to <code>1.0</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="iterations" id="dom-optionaleffecttiming-iterations"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨③">animation effect</a>’s <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑤">iteration count</a> property which is
a real number greater than or equal to zero (including positive
infinity) representing the number of times to the animation effect repeats.</p>
      <p>This may be set to <code class="esvalue">+Infinity</code> to cause
the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨④">animation effect</a> to repeat forever (unless the duration of the
effect is zero, in which case it will finish immediately).</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-duration"><code>duration</code></dfn>, <span> of type <code class="idl-code">(unrestricted double or DOMString)</code>, defaulting to <code>"auto"</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="duration" id="dom-optionaleffecttiming-duration"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①④">iteration duration</a> which is a real number greater than
or equal to zero (including positive infinity) representing the
time taken to complete a single iteration of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑤">animation
effect</a>.</p>
      <p>In this level of this specification, the string value <code>auto</code> is treated as the value zero for the purpose of timing model calculations
and for the result of the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration③">duration</a></code> member returned
from <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming⑥">getComputedTiming()</a></code>.
If the author specifies the <code>auto</code> value user agents must,
however, return <code>auto</code> for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration④">duration</a></code> member
returned from <code class="idl"><a data-link-type="idl" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming⑤">getTiming()</a></code>.</p>
      <p>This is a forwards-compatiblity measure since a future level of this
specification is expected to introduce group effects where the <code>auto</code> value expands to include the duration of the child
effects.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-direction"><code>direction</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection②">PlaybackDirection</a>, defaulting to <code>"normal"</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="direction" id="dom-optionaleffecttiming-direction"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑤">playback direction</a> of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑥">animation effect</a> which
defines whether playback proceeds forwards, backwards, or alternates
on each iteration.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="EffectTiming" data-dfn-type="dict-member" data-export id="dom-effecttiming-easing"><code>easing</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥">DOMString</a>, defaulting to <code>"linear"</code></span><dfn class="dfn-paneled idl-code" data-dfn-for="OptionalEffectTiming" data-dfn-type="dict-member" data-export data-lt="easing" id="dom-optionaleffecttiming-easing"><code></code></dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function⑧">timing function</a> used to scale the time to
produce easing effects.</p>
      <p>The syntax of the string is defined by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-easing-1/#typedef-easing-function" id="ref-for-typedef-easing-function">&lt;easing-function></a> production <a data-link-type="biblio" href="#biblio-css-easing-1">[CSS-EASING-1]</a>.</p>
    </dl>
   </div>
   <h4 class="heading settled" data-level="6.5.2" id="the-fillmode-enumeration"><span class="secno">6.5.2. </span><span class="content">The <code>FillMode</code> enumeration</span><a class="self-link" href="#the-fillmode-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-fillmode"><code><c- g>FillMode</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-none"><code><c- s>"none"</c-></code><a class="self-link" href="#dom-fillmode-none"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-forwards"><code><c- s>"forwards"</c-></code><a class="self-link" href="#dom-fillmode-forwards"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-backwards"><code><c- s>"backwards"</c-></code><a class="self-link" href="#dom-fillmode-backwards"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-both"><code><c- s>"both"</c-></code><a class="self-link" href="#dom-fillmode-both"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-auto"><code><c- s>"auto"</c-></code><a class="self-link" href="#dom-fillmode-auto"></a></dfn> };
</pre>
   <dl>
    <dt data-md><code>none</code>
    <dd data-md>
     <p>No fill.</p>
    <dt data-md><code>forwards</code>
    <dd data-md>
     <p>Fill forwards.</p>
    <dt data-md><code>backwards</code>
    <dd data-md>
     <p>Fill backwards.</p>
    <dt data-md><code>both</code>
    <dd data-md>
     <p>Fill backwards and forwards.</p>
    <dt data-md><code>auto</code>
    <dd data-md>
     <p>No fill.
In a subsequent level of this specification, this may produce different
behavior for other types of <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑦">animation effects</a>.</p>
   </dl>
   <h4 class="heading settled" data-level="6.5.3" id="the-playbackdirection-enumeration"><span class="secno">6.5.3. </span><span class="content">The <code>PlaybackDirection</code> enumeration</span><a class="self-link" href="#the-playbackdirection-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-playbackdirection"><code><c- g>PlaybackDirection</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export id="dom-playbackdirection-normal"><code><c- s>"normal"</c-></code><a class="self-link" href="#dom-playbackdirection-normal"></a></dfn>, <dfn class="idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export id="dom-playbackdirection-reverse"><code><c- s>"reverse"</c-></code><a class="self-link" href="#dom-playbackdirection-reverse"></a></dfn>, <dfn class="idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export id="dom-playbackdirection-alternate"><code><c- s>"alternate"</c-></code><a class="self-link" href="#dom-playbackdirection-alternate"></a></dfn>, <dfn class="idl-code" data-dfn-for="PlaybackDirection" data-dfn-type="enum-value" data-export id="dom-playbackdirection-alternate-reverse"><code><c- s>"alternate-reverse"</c-></code><a class="self-link" href="#dom-playbackdirection-alternate-reverse"></a></dfn> };
</pre>
   <dl>
    <dt data-md><code>normal</code>
    <dd data-md>
     <p>All iterations are played as specified.</p>
    <dt data-md><code>reverse</code>
    <dd data-md>
     <p>All iterations are played in the reverse direction from the order
they are specified.</p>
    <dt data-md><code>alternate</code>
    <dd data-md>
     <p>Even iterations are played as specified, odd iterations are played
in the reverse direction from the order they are specified.</p>
    <dt data-md><code>alternate-reverse</code>
    <dd data-md>
     <p>Even iterations are played in the reverse direction from the order
they are specified, odd iterations are played as specified.</p>
   </dl>
   <h4 class="heading settled" data-level="6.5.4" id="updating-animationeffect-timing"><span class="secno">6.5.4. </span><span class="content">Updating the timing of an <code>AnimationEffect</code></span><a class="self-link" href="#updating-animationeffect-timing"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</dfn>, <var>effect</var>,
from an <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑦">EffectTiming</a></code> or <code class="idl"><a data-link-type="idl" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming③">OptionalEffectTiming</a></code> object, <var>input</var>, perform
the following steps:</p>
   <ol>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart④">iterationStart</a></code> member of <var>input</var> is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present②">present</a> and less than zero, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑦">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
     <p class="note" role="note"><span>Note:</span> The reason for using a <span class="exceptionname">TypeError</span> rather than a <span class="exceptionname">RangeError</span> is to mirror
the behavior of WebIDL’s <a data-link-type="dfn" href="https://heycam.github.io/webidl/#EnforceRange" id="ref-for-EnforceRange">[EnforceRange]</a> annotation should that
annotation be able to be used with floating-point values in the future.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations③">iterations</a></code> member of <var>input</var> is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present③">present</a>, and
less than zero or is the value <code class="esvalue">NaN</code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑧">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration⑤">duration</a></code> member of <var>input</var> is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present④">present</a>, and
less than zero or is the value <code class="esvalue">NaN</code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑨">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing①">easing</a></code> member of <var>input</var> is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present⑤">present</a> but cannot be parsed using the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-easing-1/#typedef-easing-function" id="ref-for-typedef-easing-function①">&lt;easing-function></a> production <a data-link-type="biblio" href="#biblio-css-easing-1">[CSS-EASING-1]</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①⓪">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
    <li data-md>
     <p>Assign each member <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-present" id="ref-for-dfn-present⑥">present</a> in <var>input</var> to the corresponding timing
property of <var>effect</var> as follows:</p>
     <ul>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay①">delay</a></code> → <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑦">start delay</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay①">endDelay</a></code> → <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay⑤">end delay</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill③">fill</a></code> → <a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①④">fill mode</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart⑤">iterationStart</a></code> → <a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①⓪">iteration start</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations④">iterations</a></code> → <a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑥">iteration count</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration⑥">duration</a></code> → <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑤">iteration duration</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction①">direction</a></code> → <a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑥">playback direction</a></p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing②">easing</a></code> → <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function⑨">timing function</a></p>
     </ul>
   </ol>
   <h4 class="heading settled" data-level="6.5.5" id="the-computedeffecttiming-dictionary"><span class="secno">6.5.5. </span><span class="content">The <code>ComputedEffectTiming</code> dictionary</span><a class="self-link" href="#the-computedeffecttiming-dictionary"></a></h4>
   <p>Timing properties calculated by the timing model are exposed using <code class="idl"><a data-link-type="idl" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming②">ComputedEffectTiming</a></code> dictionary objects.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-computedeffecttiming"><code><c- g>ComputedEffectTiming</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑧"><c- n>EffectTiming</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤"><c- b>unrestricted</c-> <c- b>double</c-></a>  <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double  " href="#dom-computedeffecttiming-endtime" id="ref-for-dom-computedeffecttiming-endtime"><c- g>endTime</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥"><c- b>unrestricted</c-> <c- b>double</c-></a>  <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double  " href="#dom-computedeffecttiming-activeduration" id="ref-for-dom-computedeffecttiming-activeduration"><c- g>activeDuration</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧"><c- b>double</c-></a>?              <a class="idl-code" data-link-type="dict-member" data-type="double?              " href="#dom-computedeffecttiming-localtime" id="ref-for-dom-computedeffecttiming-localtime"><c- g>localTime</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨"><c- b>double</c-></a>?              <a class="idl-code" data-link-type="dict-member" data-type="double?              " href="#dom-computedeffecttiming-progress" id="ref-for-dom-computedeffecttiming-progress"><c- g>progress</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦"><c- b>unrestricted</c-> <c- b>double</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double? " href="#dom-computedeffecttiming-currentiteration" id="ref-for-dom-computedeffecttiming-currentiteration"><c- g>currentIteration</c-></a>;
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-endtime"><code>endTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧">unrestricted double</a></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#end-time" id="ref-for-end-time⑨">end time</a> of the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect⑨⑧">animation effect</a> expressed
in milliseconds since zero <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②①">local time</a> (that is, since
the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦①">animation</a>’s <a data-link-type="dfn" href="#start-time" id="ref-for-start-time④⑥">start time</a> if this <span id="ref-for-animation-effect⑨⑨">animation
effect</span> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①④">associated with an animation</a>).
This corresponds to the end of the <span id="ref-for-animation-effect①⓪⓪">animation effect</span>’s active
interval plus any <a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay⑥">end delay</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-activeduration"><code>activeDuration</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨">unrestricted double</a></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①⑧">active duration</a> of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪①">animation effect</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-localtime"><code>localTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⓪">double</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②②">local time</a> of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪②">animation effect</a>.</p>
      <p>This will be <code>null</code> if this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪③">animation effect</a> is not <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①⑤">associated with an animation</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-progress"><code>progress</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①">double</a>, nullable</span>
     <dd data-md>
      <p>The current <a data-link-type="dfn" href="#iteration-progress" id="ref-for-iteration-progress①②">iteration progress</a> of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪④">animation effect</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedEffectTiming" data-dfn-type="dict-member" data-export id="dom-computedeffecttiming-currentiteration"><code>currentIteration</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪">unrestricted double</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration⑤">current iteration</a> index beginning with zero for the first
iteration.</p>
      <p>In most cases this will be a (positive) integer. However, for
a zero-duration animation that repeats infinite times, the value
will be positive <span class="esvalue">Infinity</span>.</p>
      <p>As with <a data-link-type="dfn" href="#unresolved" id="ref-for-unresolved①⓪②">unresolved</a> times, an unresolved <a data-link-type="dfn" href="#current-iteration" id="ref-for-current-iteration⑥">current iteration</a> is
represented by a <span class="esvalue">null</span> value.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.6" id="the-keyframeeffect-interface"><span class="secno">6.6. </span><span class="content">The <code>KeyframeEffect</code> interface</span><a class="self-link" href="#the-keyframeeffect-interface"></a></h3>
   <p><a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⓪">Keyframe effects</a> are represented by the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect">KeyframeEffect</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="keyframeeffect"><code><c- g>KeyframeEffect</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect⑥"><c- n>AnimationEffect</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"><c- g>target</c-></a>,
                <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"><c- g>keyframes</c-></a>,
                <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions"><c- n>KeyframeEffectOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"><c- g>options</c-></a> = {});
    <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#keyframeeffect" id="ref-for-keyframeeffect①"><c- n>KeyframeEffect</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source"><c- g>source</c-></a>);
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="Element?" href="#dom-keyframeeffect-target" id="ref-for-dom-keyframeeffect-target"><c- g>target</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSOMString?" href="#dom-keyframeeffect-pseudoelement" id="ref-for-dom-keyframeeffect-pseudoelement"><c- g>pseudoElement</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation"><c- n>CompositeOperation</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="CompositeOperation" href="#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite"><c- g>composite</c-></a>;
    <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-getkeyframes" id="ref-for-dom-keyframeeffect-getkeyframes"><c- g>getKeyframes</c-></a>();
    <c- b>void</c->             <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes"><c- g>setKeyframes</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a>? <dfn class="idl-code" data-dfn-for="KeyframeEffect/setKeyframes(keyframes)" data-dfn-type="argument" data-export id="dom-keyframeeffect-setkeyframes-keyframes-keyframes"><code><c- g>keyframes</c-></code><a class="self-link" href="#dom-keyframeeffect-setkeyframes-keyframes-keyframes"></a></dfn>);
};
</pre>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(target, keyframes, options)|constructor(target, keyframes, options)|KeyframeEffect(target, keyframes)|constructor(target, keyframes)" id="dom-keyframeeffect-keyframeeffect"><code> KeyframeEffect (target, keyframes, options)</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect②">KeyframeEffect</a></code> object using the following procedure:</p>
      <ol>
       <li data-md>
        <p>Create a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect③">KeyframeEffect</a></code> object, <var>effect</var>.</p>
       <p></p>
       <li data-md>
        <p>Set the <a data-link-type="dfn" href="#target-element" id="ref-for-target-element②">target element</a> of <var>effect</var> to <var>target</var>.</p>
       <li data-md>
        <p>Let <var>timing input</var> be the result corresponding to the first
matching condition from below.</p>
        <dl>
         <dt data-md>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions①">KeyframeEffectOptions</a></code> object,
         <dd data-md>
          <p>Let <var>timing input</var> be <var>options</var>.</p>
         <dt data-md>Otherwise (if <var>options</var> is a <code>double</code>),
         <dd data-md>
          <p>Let <var>timing input</var> be a new <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑨">EffectTiming</a></code> object with all members set to their default values
and <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration⑦">duration</a></code> set to <var>options</var>.</p>
        </dl>
       <li data-md>
        <p>Call the procedure to <a data-link-type="dfn" href="#update-the-timing-properties-of-an-animation-effect" id="ref-for-update-the-timing-properties-of-an-animation-effect①">update the timing properties of an
animation effect</a> of <var>effect</var> from <var>timing input</var>.</p>
        <p>If that procedure causes an exception to be thrown, propagate the
exception and abort this procedure.</p>
       <li data-md>
        <p>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions②">KeyframeEffectOptions</a></code> object, assign
the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite①">composite</a></code> property of <var>effect</var> to
the corresponding value from <var>options</var>.</p>
        <p>When assigning this property, the error-handling defined for the
corresponding setter on the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect④">KeyframeEffect</a></code> interface is applied.
If the setter requires an exception to be thrown for the value
specified by <var>options</var>, this procedure must <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①①">throw</a> the same exception and abort all further steps.</p>
       <li data-md>
        <p>Initialize the set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④③">keyframes</a> by performing the procedure
defined for <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes①">setKeyframes()</a></code> passing <var>keyframes</var> as the input.</p>
      </ol>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="target" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-target"><code><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④">Element</a></code>? target</code></dfn>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#target-element" id="ref-for-target-element③">target element</a>.
This may be <code>null</code> for animations that do not target
a specific element.</p>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="keyframes" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes"><code>object? keyframes</code></dfn>
        <dd data-md>
         <p>The set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④④">keyframes</a> to use.
The format and processing of this argument is defined in <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes
argument</a>.</p>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(target, keyframes, options)" data-dfn-type="argument" data-export data-lt="options" id="dom-keyframeeffect-keyframeeffect-target-keyframes-options-options"><code>optional <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions③">KeyframeEffectOptions</a></code> options</code></dfn>
        <dd data-md>
         <p>Either a number specifying the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑥">iteration duration</a> of the effect,
or a collection of properties specifying the timing and behavior of
the effect.</p>
       </dl>
       <p>Examples of the usage of this constructor are given in <a href="#creating-a-new-keyframeeffect-object">§ 6.6.1 Creating a new KeyframeEffect object</a>.</p>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(source)|constructor(source)" id="dom-keyframeeffect-keyframeeffect-source"><code>KeyframeEffect (source)</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑤">KeyframeEffect</a></code> object with the same properties
as <code class="idl"><a data-link-type="idl">source</a></code> using the following procedure:</p>
      <ol>
       <li data-md>
        <p>Create a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑥">KeyframeEffect</a></code> object, <var>effect</var>.</p>
       <li data-md>
        <p>Set the following properties of <var>effect</var> using the
corresponding values of <var>source</var>:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①④">effect target</a>,</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑤">keyframes</a>,</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①②">composite operation</a>, and</p>
         <li data-md>
          <p>all specified timing properties:</p>
          <ul>
           <li data-md>
            <p><a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑧">start delay</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#end-delay" id="ref-for-end-delay⑦">end delay</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#fill-mode" id="ref-for-fill-mode①⑤">fill mode</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#iteration-start" id="ref-for-iteration-start①①">iteration start</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#iteration-count" id="ref-for-iteration-count①⑦">iteration count</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑦">iteration duration</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#playback-direction" id="ref-for-playback-direction⑦">playback direction</a>, and</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①⓪">timing function</a>.</p>
          </ul>
        </ul>
        <p class="note" role="note"><span>Note:</span> Unlike the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect①">KeyframeEffect(target, keyframes, options)</a></code> constructor,
we do not need to re-throw exceptions since the timing properties
specified on <var>source</var> can be assumed to be valid.</p>
      </ol>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect/KeyframeEffect(source)" data-dfn-type="argument" data-export data-lt="source" id="dom-keyframeeffect-keyframeeffect-source-source"><code><code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑦">KeyframeEffect</a></code> source</code></dfn>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③①">keyframe effect</a> from which to copy the properties
that define the new <span id="ref-for-keyframe-effect③②">keyframe effect</span>.</p>
       </dl>
      </div>
    </dl>
   </div>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-target"><code>target</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#target-element" id="ref-for-target-element④">target element</a> being animated by this object
(either the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①⑤">effect target</a> if it is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥">Element</a></code> or its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> if it is a pseudo-element).
This may be <code>null</code> for animations that do not target
a specific element such as an animation that produces a sound
using an audio API.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-pseudoelement"><code>pseudoElement</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①">CSSOMString</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#target-pseudo-selector" id="ref-for-target-pseudo-selector②">target pseudo-selector</a>.
This is <code>null</code> if the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①⑥">effect target</a> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦">Element</a></code> or is itself <code>null</code>.
When not <code>null</code>, this must be a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element④">pseudo-element</a> selector with <a href="https://www.w3.org/TR/selectors4/#pseudo-element-syntax">valid syntax</a>.
This will not accept invalid values and will always return the selector in
its canonical form (i.e. <code>::before</code> instead of <code>:before</code>).</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-composite"><code>composite</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation①">CompositeOperation</a></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①③">composite operation</a> used to composite this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③③">keyframe effect</a> with the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⑤">effect stack</a>, as
specified by one of the <a data-link-type="dfn" href="#compositeoperation" id="ref-for-compositeoperation">CompositeOperation</a> enumeration
values.</p>
      <p>On setting, sets the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①④">composite operation</a> property of this <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑤">animation effect</a> to the provided value.</p>
    </dl>
   </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="method" data-export data-lt="getKeyframes()" id="dom-keyframeeffect-getkeyframes"><code> sequence&lt;object> getKeyframes()</code></dfn>
     <dd data-md>
      <p>Returns the keyframes that make up this effect along with their <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②③">computed keyframe offsets</a>.</p>
      <div class="informative-bg">
       <em>This section is non-normative</em> 
       <p>The result of this method is a sequence of objects of the following
  format:</p>
<pre class="lang-idl highlight"><c- b>dictionary</c-> <c- g>ComputedKeyframe</c-> {
    // ... property-value pairs ...
    // i.e. DOMString propertyName
    <c- b>double</c->?                  <c- g>offset</c-> = <c- b>null</c->;
    <c- b>double</c->                   <c- g>computedOffset</c->;
    <c- b>DOMString</c->                <c- g>easing</c-> = "linear";
    <c- n>CompositeOperationOrAuto</c-> <c- g>composite</c-> = "auto";
};
</pre>
       <p>The meaning and values of each member is as follows:</p>
       <dl>
        <dt data-md><code>offset</code>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑥">keyframe offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑥">keyframe</a> specified as
  a number between 0.0 and 1.0 inclusive, or <code>null</code>.</p>
         <p>This will be <code>null</code> if the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑦">keyframe</a> is to be
  automatically spaced between adjacent keyframes.</p>
        <dt data-md><code>computedOffset</code>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②④">computed keyframe offset</a> for this <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑧">keyframe</a> calculated as part of running the <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets①">compute missing keyframe
  offsets</a> procedure.</p>
         <p>Unlike the <code>offset</code> member, the <code>computedOffset</code> is never null.</p>
        <dt data-md><code>easing</code>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①①">timing function</a> used to transform the progress of time
  from this keyframe until the next keyframe in the series.</p>
        <dt data-md><code>composite</code>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation①">keyframe-specific composite operation</a> used to combine the
  values specified in this keyframe with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①③">underlying value</a>.</p>
         <p>This member will be <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto">auto</a></code> if the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑤">composite operation</a> specified on the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③④">keyframe effect</a> is
  being used.</p>
       </dl>
      </div>
      <p>Since <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe④⑨">keyframes</a> are represented by a partially open-ended dictionary
type that is not currently able to be expressed with WebIDL, the procedure
used to prepare the result of this method is defined in prose below:</p>
      <ol>
       <li data-md>
        <p>Let <var>result</var> be an empty sequence of objects.</p>
       <li data-md>
        <p>Let <var>keyframes</var> be the result of applying the procedure to <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets②">compute missing keyframe offsets</a> to the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⓪">keyframes</a> for this <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑤">keyframe effect</a>.</p>
       <li data-md>
        <p>For each <var>keyframe</var> in <var>keyframes</var> perform the following steps:</p>
        <ol>
         <li data-md>
          <p>Initialize a dictionary object, <var>output keyframe</var>, using
the following definition:</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="idl-code" data-dfn-type="dictionary" data-export id="dictdef-basecomputedkeyframe"><code><c- g>BaseComputedKeyframe</c-></code><a class="self-link" href="#dictdef-basecomputedkeyframe"></a></dfn> {
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②②"><c- b>double</c-></a>?                  <dfn class="dfn-paneled idl-code" data-default="null" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="double?                  " id="dom-basecomputedkeyframe-offset"><code><c- g>offset</c-></code></dfn> = <c- b>null</c->;
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②③"><c- b>double</c-></a>                   <dfn class="dfn-paneled idl-code" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="double                   " id="dom-basecomputedkeyframe-computedoffset"><code><c- g>computedOffset</c-></code></dfn>;
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a>                <dfn class="dfn-paneled idl-code" data-default="&quot;linear&quot;" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="DOMString                " id="dom-basecomputedkeyframe-easing"><code><c- g>easing</c-></code></dfn> = "linear";
     <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto"><c- n>CompositeOperationOrAuto</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;auto&quot;" data-dfn-for="BaseComputedKeyframe" data-dfn-type="dict-member" data-export data-type="CompositeOperationOrAuto " id="dom-basecomputedkeyframe-composite"><code><c- g>composite</c-></code></dfn> = "auto";
};
</pre>
         <li data-md>
          <p>Set the <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-offset" id="ref-for-dom-basecomputedkeyframe-offset">offset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-computedoffset" id="ref-for-dom-basecomputedkeyframe-computedoffset">computedOffset</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-easing" id="ref-for-dom-basecomputedkeyframe-easing">easing</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-basecomputedkeyframe-composite" id="ref-for-dom-basecomputedkeyframe-composite">composite</a></code> members of <var>output keyframe</var> to the respective <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑦">keyframe offset</a>, <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②⑤">computed keyframe offset</a>,
keyframe-specific <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①②">timing function</a>, and <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation②">keyframe-specific composite operation</a> values of <var>keyframe</var>.</p>
         <li data-md>
          <p>For each animation property-value pair specified on <var>keyframe</var>, <var>declaration</var>, perform the following
steps:</p>
          <ol>
           <li data-md>
            <p>Let <var>property name</var> be the result of applying the <a data-link-type="dfn" href="#animation-property-name-to-idl-attribute-name" id="ref-for-animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</a> algorithm
to the property name of <var>declaration</var>.</p>
           <li data-md>
            <p>Let <var>IDL value</var> be the result of serializing
the property value of <var>declaration</var> by passing <var>declaration</var> to the algorithm to <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#serialize-a-css-value" id="ref-for-serialize-a-css-value">serialize a CSS
value</a> <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a>.</p>
           <li data-md>
            <p>Let <var>value</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#DOMString-to-es" id="ref-for-DOMString-to-es">converting</a> <var>IDL value</var> to an
ECMAScript String value.</p>
           <li data-md>
            <p>Call the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc" id="ref-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc">[[DefineOwnProperty]]</a> internal method on <var>output keyframe</var> with property name <var>property
name</var>,
Property Descriptor {
[[Writable]]: <span class="esvalue">true</span>,
[[Enumerable]]: <span class="esvalue">true</span>,
[[Configurable]]: <span class="esvalue">true</span>,
[[Value]]: <var>value</var> }
and Boolean flag <span class="esvalue">false.</span></p>
          </ol>
         <li data-md>
          <p>Append <var>output keyframe</var> to <var>result</var>.</p>
        </ol>
       <li data-md>
        <p>Return <var>result</var>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="method" data-export data-lt="setKeyframes(keyframes)" id="dom-keyframeeffect-setkeyframes"><code> void setKeyframes(object? keyframes)</code></dfn>
     <dd data-md>
      <p>Replaces the set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤①">keyframes</a> that make up this effect.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="idl-code" data-dfn-for="KeyframeEffect/setKeyframes" data-dfn-type="argument" data-export data-lt="keyframes" id="dom-keyframeeffect-setkeyframes-keyframes"><code>object? keyframes</code><a class="self-link" href="#dom-keyframeeffect-setkeyframes-keyframes"></a></dfn>
        <dd data-md>
         <p>A series of keyframes whose format and processing is defined by <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes
argument</a>.</p>
         <p>This effect’s set of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤②">keyframes</a> is replaced with the result
of performing the procedure to <a data-link-type="dfn" href="#process-a-keyframes-argument" id="ref-for-process-a-keyframes-argument">process a keyframes argument</a>.
If that procedure throws an exception, this effect’s <span id="ref-for-keyframe⑤③">keyframes</span> are not modified.</p>
       </dl>
      </div>
    </dl>
   </div>
   <h4 class="heading settled" data-level="6.6.1" id="creating-a-new-keyframeeffect-object"><span class="secno">6.6.1. </span><span class="content">Creating a new <code>KeyframeEffect</code> object</span><a class="self-link" href="#creating-a-new-keyframeeffect-object"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect②">KeyframeEffect</a></code> constructor
offers a number of approaches to creating new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑧">KeyframeEffect</a></code> objects.</p>
    <p>At its simplest, a <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect⑨">KeyframeEffect</a></code> object that changes the
‘left’ property of <code>elem</code> to 100px over three
seconds can be constructed as follows:</p>
    <div class="example" id="example-7a28f33c">
     <a class="self-link" href="#example-7a28f33c"></a>
<pre class="lang-javascript highlight"><c- a>var</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mi>3000</c-><c- p>);</c-></pre>
    </div>
    <p>The second parameter, representing the list of keyframes, may
specify multiple properties. (See <a href="#processing-a-keyframes-argument">§ 6.6.3 Processing a keyframes
argument</a>.)</p>
    <div class="example" id="example-d6624b71">
     <a class="self-link" href="#example-d6624b71"></a> 
<pre class="lang-javascript highlight"><c- c1>// Specify multiple properties at once</c->
<c- a>var</c-> effectA <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-><c- p>,</c-> top<c- o>:</c-> <c- t>'300px'</c-> <c- p>},</c-> <c- mi>3000</c-><c- p>);</c->

<c- c1>// Specify multiple keyframes</c->
<c- a>var</c-> effectB <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>[</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'300px'</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>3000</c-><c- p>);</c-></pre>
    </div>
    <p>The third parameter, representing the animation’s timing, may
simply be a number representing the <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑧">iteration duration</a> in
milliseconds as above, or, to specify further timing properties such
as the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑨">start delay</a>, an <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①⓪">EffectTiming</a></code> object can be used, as follows:</p>
    <div class="example" id="example-4d5977de">
     <a class="self-link" href="#example-4d5977de"></a>
<pre class="lang-javascript highlight"><c- a>var</c-> effect <c- o>=</c->
  <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- p>{</c-> duration<c- o>:</c-> <c- mi>3000</c-><c- p>,</c-> delay<c- o>:</c-> <c- mi>2000</c-> <c- p>});</c-></pre>
    </div>
    <p>If the duration is not specified, a value of zero is used.
It is possible to create an animation that simply sets a property
without any interpolation as follows:</p>
    <div class="example" id="example-d3a5d53d">
     <a class="self-link" href="#example-d3a5d53d"></a>
<pre class="lang-javascript highlight"><c- a>var</c-> effect <c- o>=</c->
  <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> visibility<c- o>:</c-> <c- t>'hidden'</c-> <c- p>},</c-> <c- p>{</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>});</c-></pre>
    </div>
    <p>As described in <a href="#fill-behavior">§ 4.6 Fill behavior</a> however, using indefinitely filling
animations in this way is discouraged.</p>
    <p>Having created a <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①⓪">KeyframeEffect</a></code>, it can be played by adding it to
an <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation⑦">Animation</a></code> and then playing that animation.
For simple effects, however, the <a href="#extensions-to-the-element-interface"><code>Element.animate</code></a> shortcut is more convenient since it performs these steps
automatically. For example,</p>
    <div class="example" id="example-a7ce65dd">
     <a class="self-link" href="#example-a7ce65dd"></a>
<pre class="lang-javascript highlight">elem<c- p>.</c->animate<c- p>({</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c-> <c- mi>3000</c-><c- p>);</c-></pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="6.6.2" id="property-name-conversion"><span class="secno">6.6.2. </span><span class="content">Property names and IDL names</span><a class="self-link" href="#property-name-conversion"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</dfn> algorithm for <var>property</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>If <var>property</var> follows the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name">&lt;custom-property-name></a> production,
return <var>property</var>.</p>
    <li data-md>
     <p>If <var>property</var> refers to the CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a> property,
return the string "cssFloat".</p>
    <li data-md>
     <p>If <var>property</var> refers to the CSS <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/motion-1/#propdef-offset" id="ref-for-propdef-offset">offset</a> property,
return the string "cssOffset".</p>
    <li data-md>
     <p>Otherwise, return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#css-property-to-idl-attribute" id="ref-for-css-property-to-idl-attribute①">CSS property to IDL
attribute</a> algorithm <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> to <var>property</var>.</p>
   </ol>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</dfn> algorithm for <var>attribute</var> is as follows:</p>
   <ol>
    <li data-md>
     <p>If <var>attribute</var> conforms to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name①">&lt;custom-property-name></a> production,
return <var>attribute</var>.</p>
    <li data-md>
     <p>If <var>attribute</var> is the string "cssFloat", then return
an animation property representing the CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float①">float</a> property.</p>
    <li data-md>
     <p>If <var>attribute</var> is the string "cssOffset", then return
an animation property representing the CSS <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/motion-1/#propdef-offset" id="ref-for-propdef-offset①">offset</a> property.</p>
    <li data-md>
     <p>Otherwise, return the result of applying the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom/#idl-attribute-to-css-property" id="ref-for-idl-attribute-to-css-property">IDL attribute to CSS
property</a> algorithm <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> to <var>attribute</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="6.6.3" id="processing-a-keyframes-argument"><span class="secno">6.6.3. </span><span class="content">Processing a <code>keyframes</code> argument</span><a class="self-link" href="#processing-a-keyframes-argument"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The following methods all accept a set of keyframes as an argument:</p>
    <ul>
     <li data-md>
      <p>the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect③">KeyframeEffect(target, keyframes, options)</a></code> constructor,</p>
     <li data-md>
      <p>the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes②">setKeyframes()</a></code> method on the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①①">KeyframeEffect</a></code> interface,</p>
     <li data-md>
      <p>the <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate">animate()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable">Animatable</a></code> interface mixin.</p>
    </ul>
    <p>This argument may be specified in the one of two forms as illustrated below.</p>
    <div class="example" id="example-23ca44fc">
     <a class="self-link" href="#example-23ca44fc"></a> 
<pre class="lang-javascript highlight"><c- c1>// The following two expressions produce the same result:</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>2000</c-><c- p>);</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>]</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// Likewise, for a multi-property animation, the following two</c->
<c- c1>// expressions are equivalent:</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'0px'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'-20px'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'100px'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-><c- p>,</c-> left<c- o>:</c-> <c- t>'50px'</c-><c- p>}</c-> <c- p>],</c-> <c- mi>2000</c-><c- p>);</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c->
               left<c- o>:</c-> <c- p>[</c-> <c- t>'0px'</c-><c- p>,</c-> <c- t>'-20px'</c-><c- p>,</c-> <c- t>'100px'</c-><c- p>,</c-> <c- t>'50px'</c-> <c- p>]</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// Incidentally, the following three expressions are all equivalent:</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>1000</c-><c- p>);</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'red'</c-> <c- p>]</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
</pre>
    </div>
    <p>The first form (the array-form) consists of an array of keyframes where each
keyframe may specify at most one value per animation property.
The second form (the object-form) consists of an object where each animation
property may specify a single animation value or an array of animation values.</p>
    <p>The first array-form is the canonical form and is the form returned by the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-getkeyframes" id="ref-for-dom-keyframeeffect-getkeyframes①">getKeyframes()</a></code> method.</p>
    <p><a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑧">Keyframe offsets</a> can be specified using either form as illustrated below:</p>
    <div class="example" id="example-34879cb3">
     <a class="self-link" href="#example-34879cb3"></a> 
<pre class="lang-javascript highlight"><c- c1>// The keyframes without offsets will automatically have offsets computed</c->
<c- c1>// as 0 for the first keyframe, 0.65 for the middle keyframe, and 1 for the</c->
<c- c1>// final keyframe.</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mf>0.5</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-><c- p>,</c-> offset<c- o>:</c-> <c- mf>0.8</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'pink'</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// The following produces the same result. Note that it is not necessary to</c->
<c- c1>// specify the last value: it will automatically be treated as 'null' and then</c->
<c- c1>// the automatic assignment will apply as with the previous case.</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'red'</c-><c- p>,</c-> <c- t>'yellow'</c-><c- p>,</c-> <c- t>'pink'</c-> <c- p>],</c->
               offset<c- o>:</c-> <c- p>[</c-> <c- kc>null</c-><c- p>,</c-> <c- mf>0.5</c-><c- p>,</c-> <c- kc>null</c-><c- p>,</c-> <c- mf>0.8</c-> <c- p>]</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->
</pre>
    </div>
    <p>Likewise <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①③">timing functions</a> and <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation③">keyframe-specific composite
operations</a> may be specified in either form. The array-form allows
specifying different values for each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤④">keyframe</a> whilst for the object-form,
the list of values will be repeated as needed until each keyframe has been
assigned a value.</p>
    <div class="example" id="example-52bc65a2">
     <a class="self-link" href="#example-52bc65a2"></a> 
<pre class="lang-javascript highlight"><c- c1>// Since timing functions apply _between_ keyframes, even if we specify a</c->
<c- c1>// a timing function on the last keyframe it will be ignored.</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> color<c- o>:</c-> <c- t>'blue'</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-in'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'green'</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-out'</c-> <c- p>},</c->
               <c- p>{</c-> color<c- o>:</c-> <c- t>'yellow'</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// The following produces the same result.</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c->
               easing<c- o>:</c-> <c- p>[</c-> <c- t>'ease-in'</c-><c- p>,</c-> <c- t>'ease-out'</c-> <c- p>]</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// The repeating behavior makes assigning the same value to all keyframes</c->
<c- c1>// simple:</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c->
               easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->
</pre>
    </div>
    <p>Note that the <code>easing</code> property in either form sets the <em>keyframe-specific timing function</em>.
This is independent from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①④">timing function</a> that applies to the
entire <a data-link-type="dfn" href="#iteration-duration" id="ref-for-iteration-duration①⑨">iteration duration</a> of the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑥">keyframe effect</a> as specified
using a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions④">KeyframeEffectOptions</a></code> object (or <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions">KeyframeAnimationOptions</a></code> object when using the <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate①">animate()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable①">Animatable</a></code> interface mixin).</p>
    <p>In the following example, the two statements produce different results.</p>
    <div class="example" id="example-148601d7">
     <a class="self-link" href="#example-148601d7"></a> 
<pre class="lang-javascript highlight"><c- c1>// Here, 'ease-in-out' is applied between each color value.</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>],</c->
               easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->

<c- c1>// However, in this case, 'ease-in-out' is applied across the whole span</c->
<c- c1>// of the animation, that is from 'blue' to 'yellow'.</c->
elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- p>[</c-> <c- t>'blue'</c-><c- p>,</c-> <c- t>'green'</c-><c- p>,</c-> <c- t>'yellow'</c-> <c- p>]</c-> <c- p>},</c->
             <c- p>{</c-> duration<c- o>:</c-> <c- mi>2000</c-><c- p>,</c-> easing<c- o>:</c-> <c- t>'ease-in-out'</c-> <c- p>});</c->
</pre>
    </div>
    <p>The type of the <code>keyframes</code> argument cannot be expressed in WebIDL
since it relies on a partially-open dictionary type.</p>
    <p>Conceptually, the type of this argument is equivalent to the following
WebIDL-like definition:</p>
<pre class="lang-idl highlight"><c- b>dictionary</c-> <c- g>Keyframe</c-> {
    // ... property-value pairs ...
    // i.e. DOMString propertyName
    <c- b>double</c->?                   <c- g>offset</c-> = <c- b>null</c->;
    <c- b>DOMString</c->                 <c- g>easing</c-> = "linear";
    <c- n>CompositeOperationOrAuto</c->  <c- g>composite</c-> = "auto";
};

<c- b>dictionary</c-> <c- g>PropertyIndexedKeyframes</c-> {
    // ... property-value and property-valuelist pairs ...
    // i.e. (DOMString or sequence&amp;lt;DOMString&amp;gt;) propertyName
    (<c- b>double</c->? <c- b>or</c-> <c- b>sequence</c->&lt;<c- b>double</c->?>)                         <c- g>offset</c-> = [];
    (<c- b>DOMString</c-> <c- b>or</c-> <c- b>sequence</c->&lt;<c- b>DOMString</c->>)                     <c- g>easing</c-> = [];
    (<c- n>CompositeOperationOrAuto</c-> <c- b>or</c-> <c- b>sequence</c->&lt;<c- n>CompositeOperationOrAuto</c->>) <c- g>composite</c-> = [];
};

<c- b>typedef</c-> (<c- b>sequence</c->&lt;<c- n>Keyframe</c->> <c- b>or</c-> <c- n>PropertyIndexedKeyframes</c->) <c- g>KeyframeArgument</c->;
</pre>
    <p>The meaning and allowed values of each argument is as follows:</p>
    <dl>
     <dt data-md>offset
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset⑨">keyframe offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑤">keyframe</a> specified as
a number between 0.0 and 1.0 inclusive or <code>null</code>.</p>
      <p>A <code>null</code> value indicates that the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑥">keyframe</a> should be automatically spaced between adjacent keyframes.</p>
      <p>Specifying an offset outside the range [0.0, 1.0] will cause
a <span class="exceptionname">TypeError</span> to be thrown.</p>
      <p>Keyframes that specify an offset must be provided in increasing
order of offset. Adjacent and equal offsets, however, are permitted.</p>
     <dt data-md>easing
     <dd data-md>
      <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①⑤">timing function</a> used to transform the progress of time
from this keyframe until the next keyframe in the series.</p>
      <p>The syntax and error-handling associated with parsing this string
is identical to that defined for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing③">easing</a></code> attribute
of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①①">EffectTiming</a></code> interface.</p>
     <dt data-md>composite
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation④">keyframe-specific composite operation</a> used to combine the values
specified in this keyframe with the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①④">underlying value</a>.</p>
      <p>If <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto①">auto</a></code>, the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑥">composite operation</a> specified on the <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑦">keyframe effect</a> will be used.</p>
    </dl>
    <p>Since this type cannot be expressed in WebIDL, its processing is defined in
prose following.</p>
   </div>
   <p>For each method that takes a <code>keyframes</code> argument, the
procedure to <a data-link-type="dfn" href="#process-a-keyframes-argument" id="ref-for-process-a-keyframes-argument①">process a keyframes argument</a> is run on the input and
the result of that procedure is retained.</p>
   <p>First we define two supporting definitions.</p>
   <p>The instruction, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="check-the-completion-record">check the completion record</dfn> of <var>result</var>,
where <var>result</var> is a <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type" id="ref-for-sec-completion-record-specification-type">completion record</a> from calling
an ECMAScript operation, is equivalent to the following steps:</p>
   <ol>
    <li data-md>
     <p>If <var>result</var> is an <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type" id="ref-for-sec-completion-record-specification-type①">abrupt completion</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①②">throw</a> the exception contained in the [[value]] field of <var>result</var> and abort the procedure.</p>
     <p class="issue" id="issue-47a68024"><a class="self-link" href="#issue-47a68024"></a> What should we do if the [[type]] is <span class="esvalue">break</span>, <span class="esvalue">continue</span>, or <span class="esvalue">return</span>? Can it be?</p>
    <li data-md>
     <p>Replace <var>result</var> with the value contained in the [[value]] field
of <var>result</var>.</p>
   </ol>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-keyframe-like-object">process a keyframe-like object</dfn>, takes two
arguments:</p>
   <ul>
    <li data-md>
     <p>an ECMAScript object, <var>keyframe input</var>, and</p>
    <li data-md>
     <p>an <var>allow lists</var> boolean flag</p>
   </ul>
   <p>and returns a map from either property names to DOMString values if <var>allow
lists</var> is false, or from property names to sequences of DOMString values
otherwise, using the following procedure:</p>
   <ol>
    <li data-md>
     <p>Run the procedure to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#es-to-dictionary" id="ref-for-es-to-dictionary">convert an ECMAScript
value to a dictionary type</a> <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a> with <var>keyframe input</var> as the ECMAScript value, and the dictionary type depending on the value of
the <var>allow lists</var> flag as follows:</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>allow lists</var> is true,
       <dd data-md>
        <p>Use the following dictionary type:</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="idl-code" data-dfn-type="dictionary" data-export id="dictdef-basepropertyindexedkeyframe"><code><c- g>BasePropertyIndexedKeyframe</c-></code><a class="self-link" href="#dictdef-basepropertyindexedkeyframe"></a></dfn> {
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②④"><c- b>double</c-></a>? <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑤"><c- b>double</c-></a>?>)                         <dfn class="idl-code" data-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(double? or sequence<double?>)                         " id="dom-basepropertyindexedkeyframe-offset"><code><c- g>offset</c-></code><a class="self-link" href="#dom-basepropertyindexedkeyframe-offset"></a></dfn> = [];
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨"><c- b>DOMString</c-></a>>)                     <dfn class="idl-code" data-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(DOMString or sequence<DOMString>)                     " id="dom-basepropertyindexedkeyframe-easing"><code><c- g>easing</c-></code><a class="self-link" href="#dom-basepropertyindexedkeyframe-easing"></a></dfn> = [];
    (<a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto①"><c- n>CompositeOperationOrAuto</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto②"><c- n>CompositeOperationOrAuto</c-></a>>) <dfn class="idl-code" data-default="[]" data-dfn-for="BasePropertyIndexedKeyframe" data-dfn-type="dict-member" data-export data-type="(CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) " id="dom-basepropertyindexedkeyframe-composite"><code><c- g>composite</c-></code><a class="self-link" href="#dom-basepropertyindexedkeyframe-composite"></a></dfn> = [];
};
</pre>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Use the following dictionary type,</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="idl-code" data-dfn-type="dictionary" data-export id="dictdef-basekeyframe"><code><c- g>BaseKeyframe</c-></code><a class="self-link" href="#dictdef-basekeyframe"></a></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑥"><c- b>double</c-></a>?                  <dfn class="idl-code" data-default="null" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="double?                  " id="dom-basekeyframe-offset"><code><c- g>offset</c-></code><a class="self-link" href="#dom-basekeyframe-offset"></a></dfn> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪"><c- b>DOMString</c-></a>                <dfn class="idl-code" data-default="&quot;linear&quot;" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="DOMString                " id="dom-basekeyframe-easing"><code><c- g>easing</c-></code><a class="self-link" href="#dom-basekeyframe-easing"></a></dfn> = "linear";
    <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto③"><c- n>CompositeOperationOrAuto</c-></a> <dfn class="idl-code" data-default="&quot;auto&quot;" data-dfn-for="BaseKeyframe" data-dfn-type="dict-member" data-export data-type="CompositeOperationOrAuto " id="dom-basekeyframe-composite"><code><c- g>composite</c-></code><a class="self-link" href="#dom-basekeyframe-composite"></a></dfn> = "auto";
};
</pre>
      </dl>
     </div>
     <p>Store the result of this procedure as <var>keyframe output</var>.</p>
    <li data-md>
     <p>Build up a list of <var>animatable properties</var> as follows:</p>
     <ol>
      <li data-md>
       <p>Let <var>animatable properties</var> be a list of property
names (including shorthand properties that have longhand sub-properties
that are animatable) that can be animated by the implementation.</p>
      <li data-md>
       <p>Convert each property name in <var>animatable properties</var> to the equivalent IDL attribute by applying the <a data-link-type="dfn" href="#animation-property-name-to-idl-attribute-name" id="ref-for-animation-property-name-to-idl-attribute-name①">animation property name to IDL attribute name</a> algorithm.</p>
     </ol>
    <li data-md>
     <p>Let <var>input properties</var> be the result of calling the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames" id="ref-for-sec-enumerableownnames">EnumerableOwnNames</a> operation with <var>keyframe input</var> as
the object.</p>
    <li data-md>
     <p>Make up a new list <var>animation properties</var> that consists of
all of the properties that are in <em>both</em> <var>input
properties</var> and <var>animatable properties</var>, <em>or</em> which are in <var>input properties</var> and conform to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name②">&lt;custom-property-name></a> production.</p>
    <li data-md>
     <p>Sort <var>animation properties</var> in ascending order by the Unicode
codepoints that define each property name.</p>
    <li data-md>
     <p>For each <var>property name</var> in <var>animation properties</var>,</p>
     <ol>
      <li data-md>
       <p>Let <var>raw value</var> be the result of calling the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver" id="ref-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver">[[Get]]</a> internal method on <var>keyframe input</var>, with <var>property
name</var> as the property key and <var>keyframe input</var> as the
receiver.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record">Check the completion record</a> of <var>raw value</var>.</p>
      <li data-md>
       <p>Convert <var>raw value</var> to a DOMString or sequence of DOMStrings <var>property values</var> as follows:</p>
       <div class="switch">
        <dl>
         <dt data-md>If <var>allow lists</var> is true,
         <dd data-md>
          <p>Let <var>property values</var> be the result of converting <var>raw
value</var> to IDL type <code>(DOMString or
sequence&lt;DOMString>)</code> using the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value">procedures
defined for converting an ECMAScript value to an IDL value</a> <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a>.</p>
          <p>If <var>property values</var> is a single DOMString, replace <var>property values</var> with a sequence of DOMStrings with the
original value of <var>property values</var> as the only element.</p>
         <dt data-md>Otherwise,
         <dd data-md>
          <p>Let <var>property values</var> be the result of converting <var>raw
value</var> to a DOMString using the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#es-to-DOMString" id="ref-for-es-to-DOMString">procedure for converting an ECMAScript value to
a DOMString</a> <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a>.</p>
        </dl>
       </div>
      <li data-md>
       <p>Calculate the <var>normalized property name</var> as the result of
applying the <a data-link-type="dfn" href="#idl-attribute-name-to-animation-property-name" id="ref-for-idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</a> algorithm to <var>property name</var>.</p>
      <li data-md>
       <p>Add a property to to <var>keyframe output</var> with <var>normalized
property name</var> as the property name, and <var>property values</var> as the property value.</p>
     </ol>
    <li data-md>
     <p>Return <var>keyframe output</var>.</p>
   </ol>
   <p>The procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-keyframes-argument">process a keyframes argument</dfn> takes a nullable
ECMAScript object, <var>object</var>, as input and returns a sequence of
keyframes using the following procedure:</p>
   <ol>
    <li data-md>
     <p>If <var>object</var> is null, return an empty sequence of keyframes.</p>
    <li data-md>
     <p>Let <var>processed keyframes</var> be an empty sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑦">keyframes</a>.</p>
    <li data-md>
     <p>Let <var>method</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod" id="ref-for-sec-getmethod">GetMethod</a>(<var>object</var>, <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols" id="ref-for-sec-well-known-symbols">@@iterator</a>).</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record①">Check the completion record</a> of <var>method</var>.</p>
    <li data-md>
     <p>Perform the steps corresponding to the first matching condition from below,</p>
     <div class="switch">
      <dl>
       <dt data-md>If <var>method</var> is not <span class="esvalue">undefined</span>,
       <dd data-md>
        <ol>
         <li data-md>
          <p>Let <var>iter</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator" id="ref-for-sec-getiterator">GetIterator</a>(<var>object</var>, <var>method</var>).</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record②">Check the completion record</a> of <var>iter</var>.</p>
         <li data-md>
          <p>Repeat:</p>
          <ol>
           <li data-md>
            <p>Let <var>next</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep" id="ref-for-sec-iteratorstep">IteratorStep</a>(<var>iter</var>).</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record③">Check the completion record</a> of <var>next</var>.</p>
           <li data-md>
            <p>If <var>next</var> is false abort this loop.</p>
           <li data-md>
            <p>Let <var>nextItem</var> be <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue" id="ref-for-sec-iteratorvalue">IteratorValue</a>(next).</p>
           <li data-md>
            <p><a data-link-type="dfn" href="#check-the-completion-record" id="ref-for-check-the-completion-record④">Check the completion record</a> of <var>nextItem</var>.</p>
           <li data-md>
            <p>If <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values" id="ref-for-sec-ecmascript-data-types-and-values">Type</a>(<var>nextItem</var>) is not Undefined, Null or Object, then
throw a <span class="exceptionname">TypeError</span> and abort
these steps.</p>
           <li data-md>
            <p>Append to <var>processed keyframes</var> the result of
running the procedure to <a data-link-type="dfn" href="#process-a-keyframe-like-object" id="ref-for-process-a-keyframe-like-object">process a keyframe-like object</a> passing <var>nextItem</var> as the <var>keyframe input</var> and with the <var>allow lists</var> flag set to false.</p>
          </ol>
        </ol>
       <dt data-md>Otherwise,
       <dd data-md>
        <ol>
         <li data-md>
          <p>Let <var>property-indexed keyframe</var> be the result of
running the procedure to <a data-link-type="dfn" href="#process-a-keyframe-like-object" id="ref-for-process-a-keyframe-like-object①">process a keyframe-like object</a> passing <var>object</var> as the <var>keyframe input</var> and with the <var>allow lists</var> flag set to true.</p>
         <li data-md>
          <p>For each member, <var>m</var>, in <var>property-indexed
keyframe</var>, perform the following steps:</p>
          <ol>
           <li data-md>
            <p>Let <var>property name</var> be the key for <var>m</var>.</p>
           <li data-md>
            <p>If <var>property name</var> is “composite”, or
“easing”, or “offset”, skip the
remaining steps in this loop and continue from the next member
in <var>property-indexed keyframe</var> after <var>m</var>.</p>
           <li data-md>
            <p>Let <var>property values</var> be the value for <var>m</var>.</p>
           <li data-md>
            <p>Let <var>property keyframes</var> be an empty sequence of <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑧">keyframes</a>.</p>
           <li data-md>
            <p>For each value, <var>v</var>, in <var>property values</var> perform the following steps:</p>
            <ol>
             <li data-md>
              <p>Let <var>k</var> be a new <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑤⑨">keyframe</a> with a null <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①⓪">keyframe offset</a>.</p>
             <li data-md>
              <p>Add the property-value pair, <var>property name</var> → <var>v</var>, to <var>k</var>.</p>
             <li data-md>
              <p>Append <var>k</var> to <var>property keyframes</var>.</p>
            </ol>
           <li data-md>
            <p>Apply the procedure to <a data-link-type="dfn" href="#compute-missing-keyframe-offsets" id="ref-for-compute-missing-keyframe-offsets③">compute missing keyframe
offsets</a> to <var>property keyframes</var>.</p>
           <li data-md>
            <p>Add <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⓪">keyframes</a> in <var>property keyframes</var> to <var>processed keyframes</var>.</p>
          </ol>
         <li data-md>
          <p>Sort <var>processed keyframes</var> by the <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②⑥">computed
keyframe offset</a> of each <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥①">keyframe</a> in increasing order.</p>
         <li data-md>
          <p>Merge adjacent <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥②">keyframes</a> in <var>processed keyframes</var> when they have equal <a data-link-type="dfn" href="#computed-keyframe-offset" id="ref-for-computed-keyframe-offset②⑦">computed keyframe offsets</a>.</p>
         <li data-md>
          <p>Let <var>offsets</var> be a sequence of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-nullable-type" id="ref-for-dfn-nullable-type">nullable</a> <code>double</code> values assigned based on the type of the
“offset” member of the <var>property-indexed
keyframe</var> as follows:</p>
          <div class="switch">
           <dl>
            <dt data-md><code>sequence&lt;double?></code>,
            <dd data-md>
             <p>The value of “offset” as-is.</p>
            <dt data-md><code>double?</code>,
            <dd data-md>
             <p>A sequence of length one with the value of “offset”
as its single item, i.e.
« <code>offset</code> »,</p>
           </dl>
          </div>
         <li data-md>
          <p>Assign each value in <var>offsets</var> to the <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①①">keyframe
offset</a> of the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥③">keyframe</a> with corresponding position in <var>processed keyframes</var> until the end of either sequence is
reached.</p>
         <li data-md>
          <p>Let <var>easings</var> be a sequence of <code>DOMString</code> values assigned based on the type of the “easing” member
of the <var>property-indexed keyframe</var> as follows:</p>
          <div class="switch">
           <dl>
            <dt data-md><code>sequence&lt;DOMString></code>,
            <dd data-md>
             <p>The value of “easing” as-is.</p>
            <dt data-md><code>DOMString</code>,
            <dd data-md>
             <p>A sequence of length one with the value of “easing”
as its single item, i.e.
« <code>easing</code> »,</p>
           </dl>
          </div>
         <li data-md>
          <p>If <var>easings</var> is an empty sequence, let it be a sequence
of length one containing the single value “linear”, i.e.
« "linear" ».</p>
         <li data-md>
          <p>If <var>easings</var> has fewer items than <var>processed
keyframes</var>, repeat the elements in <var>easings</var> successively starting from the beginning of the list until <var>easings</var> has as many items as <var>processed
keyframes</var>.</p>
          <div class="example" id="example-3d1abc15"><a class="self-link" href="#example-3d1abc15"></a> For example, if <var>processed keyframes</var> has
five items, and <var>easings</var> is the sequence
« "ease-in", "ease-out" », <var>easings</var> would be repeated to become
« "ease-in", "ease-out", "ease-in", "ease-out",
"ease-in" ». </div>
         <li data-md>
          <p>If <var>easings</var> has more items than <var>processed
keyframes</var>, store the excess items as <var>unused
easings</var>.</p>
         <li data-md>
          <p>Assign each value in <var>easings</var> to a property named
“easing” on the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥④">keyframe</a> with the corresponding
position in <var>processed keyframes</var> until the end of <var>processed keyframes</var> is reached.</p>
         <li data-md>
          <p>If the “composite” member of the <var>property-indexed
keyframe</var> is <em>not</em> an empty sequence:</p>
          <ol>
           <li data-md>
            <p>Let <var>composite modes</var> be a sequence of <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto④">CompositeOperationOrAuto</a></code> values assigned from the
“composite” member of <var>property-indexed
keyframe</var>.
If that member is a single <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto⑤">CompositeOperationOrAuto</a></code> value
operation, let <var>composite modes</var> be a sequence of
length one, with the value of the “composite” as its
single item.</p>
           <li data-md>
            <p>As with <var>easings</var>, if <var>composite modes</var> has fewer items than <var>processed keyframes</var>, repeat the
elements in <var>composite modes</var> successively starting
from the beginning of the list until <var>composite modes</var> has as many items as <var>processed keyframes</var>.</p>
           <li data-md>
            <p>Assign each value in <var>composite modes</var> that is not <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto②">auto</a></code> to the <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation⑤">keyframe-specific composite operation</a> on the <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑤">keyframe</a> with the corresponding position in <var>processed keyframes</var> until the end of <var>processed
keyframes</var> is reached.</p>
          </ol>
        </ol>
      </dl>
     </div>
    <li data-md>
     <p>If <var>processed keyframes</var> is not <a data-link-type="dfn" href="#loosely-sorted-by-offset" id="ref-for-loosely-sorted-by-offset">loosely sorted by
offset</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①③">throw</a> a <span class="exceptionname">TypeError</span> and abort these steps.</p>
    <li data-md>
     <p>If there exist any <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑥">keyframe</a> in <var>processed keyframes</var> whose <a data-link-type="dfn" href="#keyframe-offset" id="ref-for-keyframe-offset①②">keyframe offset</a> is non-null and less
than zero or greater than one, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①④">throw</a> a <span class="exceptionname">TypeError</span> and abort these steps.</p>
    <li data-md>
     <p>For each <var>frame</var> in <var>processed keyframes</var>, perform the
following steps:</p>
     <ol>
      <li data-md>
       <p>For each property-value pair in <var>frame</var>, parse the property
value using the syntax specified for that property.</p>
       <p>If the property value is invalid according to the syntax for the
property, discard the property-value pair.
User agents that provide support for diagnosing errors in content
SHOULD produce an appropriate warning highlighting the invalid
property value.</p>
      <li data-md>
       <p>Let the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①⑥">timing function</a> of <var>frame</var> be the result of
parsing the “easing” property on <var>frame</var> using the
CSS syntax defined for the <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing④">easing</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①②">EffectTiming</a></code> dictionary.</p>
       <p>If parsing the “easing” property fails, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①⑤">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
       <p class="note" role="note"><span>Note:</span> Using the CSS parser in both of the above steps implies that CSS
comments and escaping are allowed but are not retained when the value
is successfully parsed.</p>
       <p class="note" role="note"><span>Note:</span> In the case where the “easing” property fails to
parse, it is important that the <span class="exceptionname">TypeError</span> is thrown <em>after</em> all
reading the properties from <var>object</var> since failing to do so
would be observable and will not match the behavior if partially
open-ended dictionaries are later supported in WebIDL.</p>
     </ol>
    <li data-md>
     <p>Parse each of the values in <var>unused easings</var> using the CSS syntax
defined for <code class="idl"><a data-link-type="idl" href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing⑤">easing</a></code> member of the <code class="idl"><a data-link-type="idl" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①③">EffectTiming</a></code> interface, and if any of the values fail to parse, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①⑥">throw</a> a <span class="exceptionname">TypeError</span> and abort this procedure.</p>
     <div class="note" role="note">
      <p>This final step is required in order to provide consistent behavior such
that a <span class="exceptionname">TypeError</span> is thrown in all of the
following cases:</p>
<pre class="lang-javascript highlight">elem<c- p>.</c->animate<c- p>({</c-> easing<c- o>:</c-> <c- t>'invalid'</c-> <c- p>});</c->
elem<c- p>.</c->animate<c- p>({</c-> easing<c- o>:</c-> <c- p>[</c-><c- t>'invalid'</c-><c- p>]</c-> <c- p>});</c->
elem<c- p>.</c->animate<c- p>([{</c-> easing<c- o>:</c-> <c- t>'invalid'</c-> <c- p>}]);</c->
</pre>
     </div>
   </ol>
   <h4 class="heading settled" data-level="6.6.4" id="the-keyframeeffectoptions-dictionary"><span class="secno">6.6.4. </span><span class="content">The <code>KeyframeEffectOptions</code> dictionary</span><a class="self-link" href="#the-keyframeeffectoptions-dictionary"></a></h4>
   <p>Additional parameters may be passed to the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect④">KeyframeEffect(target, keyframes,
options)</a></code> constructor by providing a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑤">KeyframeEffectOptions</a></code> object.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-keyframeeffectoptions"><code><c- g>KeyframeEffectOptions</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①④"><c- n>EffectTiming</c-></a> {
    <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation②"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-default="&quot;replace&quot;" data-link-type="dict-member" data-type="CompositeOperation " href="#dom-keyframeeffectoptions-composite" id="ref-for-dom-keyframeeffectoptions-composite"><c- g>composite</c-></a> = "replace";
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②"><c- n>CSSOMString</c-></a>?       <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?       " href="#dom-keyframeeffectoptions-pseudoelement" id="ref-for-dom-keyframeeffectoptions-pseudoelement"><c- g>pseudoElement</c-></a> = <c- b>null</c->;
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffectOptions" data-dfn-type="dict-member" data-export id="dom-keyframeeffectoptions-composite"><code>composite</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation③">CompositeOperation</a>, defaulting to <code>"replace"</code></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑦">composite operation</a> used to composite this
animation with the <a data-link-type="dfn" href="#effect-stack" id="ref-for-effect-stack①⑥">effect stack</a>, as specified by one
of the <a data-link-type="dfn" href="#compositeoperation" id="ref-for-compositeoperation①">CompositeOperation</a> enumeration values.
This is used for all <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑦">keyframes</a> that specify
a <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto③">auto</a></code> <a data-link-type="dfn" href="#keyframe-specific-composite-operation" id="ref-for-keyframe-specific-composite-operation⑥">keyframe-specific composite
operation</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffectOptions" data-dfn-type="dict-member" data-export id="dom-keyframeeffectoptions-pseudoelement"><code>pseudoElement</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring③">CSSOMString</a>, nullable, defaulting to <code>null</code></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑤">pseudo-element</a> selector (which must be valid or <code>null</code>)
used to specify the <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①⑦">effect target</a> given the <a data-link-type="dfn" href="#target-element" id="ref-for-target-element⑤">target element</a>.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.7" id="the-compositeoperation-enumeration"><span class="secno">6.7. </span><span class="content">The <code>CompositeOperation</code> and <code>CompositeOperationOrAuto</code> enumerations</span><a class="self-link" href="#the-compositeoperation-enumeration"></a></h3>
   <p>The possible values of an <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑧">keyframe effect</a>’s
composition behavior are represented by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compositeoperation">CompositeOperation</dfn> enumeration.</p>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-compositeoperation"><code><c- g>CompositeOperation</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate"><c- s>"accumulate"</c-></a> };
</pre>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt="&quot;replace&quot;|replace" id="dom-compositeoperation-replace"><code>replace</code></dfn>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#composite-operation-replace" id="ref-for-composite-operation-replace②">replace</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑧">composite operation</a> value such that
the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑥">animation effect</a> overrides the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑤">underlying value</a> it
is combined with.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt="&quot;add&quot;|add" id="dom-compositeoperation-add"><code>add</code></dfn>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#composite-operation-add" id="ref-for-composite-operation-add③">add</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation①⑨">composite operation</a> value such that
the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑦">animation effect</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition②">added</a> to the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑥">underlying value</a> with which it is combined.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperation,CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt="&quot;accumulate&quot;|accumulate" id="dom-compositeoperation-accumulate"><code>accumulate</code></dfn>
    <dd data-md>
     <p>Corresponds to the <a data-link-type="dfn" href="#composite-operation-accumulate" id="ref-for-composite-operation-accumulate">accumulate</a> <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②⓪">composite operation</a> value such that
the <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑧">animation effect</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation②">accumulated</a> on to the <a data-link-type="dfn" href="#underlying-value" id="ref-for-underlying-value①⑦">underlying value</a>.</p>
   </dl>
   <p>The possible values of a <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑧">keyframe</a>'s composition behavior share the same
values as the <code class="idl"><a data-link-type="idl" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation④">CompositeOperation</a></code> enumeration along with the additional <code class="idl"><a data-link-type="idl" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto④">auto</a></code> value.</p>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-compositeoperationorauto"><code><c- g>CompositeOperationOrAuto</c-></code></dfn> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace①"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add①"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate①"><c- s>"accumulate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto⑤"><c- s>"auto"</c-></a> };
</pre>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="CompositeOperationOrAuto" data-dfn-type="enum-value" data-export data-lt="&quot;auto&quot;|auto" id="dom-compositeoperationorauto-auto"><code>auto</code></dfn>
    <dd data-md>
     <p>Indicates that the <a data-link-type="dfn" href="#composite-operation" id="ref-for-composite-operation②①">composite operation</a> of the associated <a data-link-type="dfn" href="#keyframe-effect" id="ref-for-keyframe-effect③⑨">keyframe
effect</a> should be used.</p>
   </dl>
   <h3 class="heading settled" data-level="6.8" id="the-animatable-interface-mixin"><span class="secno">6.8. </span><span class="content">The <code>Animatable</code> interface mixin</span><a class="self-link" href="#the-animatable-interface-mixin"></a></h3>
   <p>Objects that may be the target of an <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①②">KeyframeEffect</a></code> object implement
the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable②">Animatable</a></code> interface mixin.</p>
<pre class="idl highlight def"><c- b>interface</c-> <c- b>mixin</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animatable"><code><c- g>Animatable</c-></code></dfn> {
    <a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation⑧"><c- n>Animation</c-></a>           <a class="idl-code" data-link-type="method" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate②"><c- g>animate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object③"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-keyframes" id="ref-for-dom-animatable-animate-keyframes-options-keyframes"><c- g>keyframes</c-></a>,
                                <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions①"><c- n>KeyframeAnimationOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-options" id="ref-for-dom-animatable-animate-keyframes-options-options"><c- g>options</c-></a> = {});
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation⑨"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations"><c- g>getAnimations</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-getanimationsoptions" id="ref-for-dictdef-getanimationsoptions"><c- n>GetAnimationsOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options"><c- g>options</c-></a> = {});
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-keyframeanimationoptions"><code><c- g>KeyframeAnimationOptions</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑥"><c- n>KeyframeEffectOptions</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-keyframeanimationoptions-id" id="ref-for-dom-keyframeanimationoptions-id"><c- g>id</c-></a> = "";
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-getanimationsoptions"><code><c- g>GetAnimationsOptions</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="boolean " href="#dom-getanimationsoptions-subtree" id="ref-for-dom-getanimationsoptions-subtree"><c- g>subtree</c-></a> = <c- b>false</c->;
};
</pre>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable" data-dfn-type="method" data-export data-lt="animate(keyframes, options)|animate(keyframes)" id="dom-animatable-animate"><code>Animation animate(keyframes, options)</code></dfn>
     <dd data-md>
      <p>Performs the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>target</var> be the object on which this method was called.</p>
       <li data-md>
        <p>Construct a new <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①③">KeyframeEffect</a></code> object, <var>effect</var>,
in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑥">relevant Realm</a> of <var>target</var> by using the same
procedure as the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑤">KeyframeEffect(target, keyframes,
options)</a></code> constructor, passing <var>target</var> as the <var>target</var> argument, and the <var>keyframes</var> and <var>options</var> arguments as supplied.</p>
        <p>If the above procedure causes an exception to be thrown, propagate the
exception and abort this procedure.</p>
       <li data-md>
        <p>Construct a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⓪">Animation</a></code> object, <var>animation</var>, in
the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑦">relevant Realm</a> of <var>target</var> by using the
same procedure as the <code class="idl"><a data-link-type="idl" href="#dom-animation-animation" id="ref-for-dom-animation-animation①">Animation()</a></code> constructor, passing <var>effect</var> as the argument of the same name, and
the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline⑦">default document timeline</a> of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">node document</a> of the element on which this method was called as the <var>timeline</var> argument.</p>
       <li data-md>
        <p>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions②">KeyframeAnimationOptions</a></code> object,
assign the value of the <code>id</code> member of <var>options</var> to <var>animation</var>’s <code class="idl"><a data-link-type="idl" href="#dom-animation-id" id="ref-for-dom-animation-id①">id</a></code> attribute.</p>
       <li data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#play-an-animation" id="ref-for-play-an-animation⑤">play an animation</a> for <var>animation</var> with the <var>auto-rewind</var> flag set to true.</p>
       <li data-md>
        <p>Return <var>animation</var>.</p>
      </ol>
      <div class="informative-bg">
       <em>This section is non-normative</em> 
       <p>The following code fragment:</p>
<pre class="lang-javascript highlight"><c- a>var</c-> animation <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c-></pre>
       <p>is roughly equivalent to:</p>
<pre class="lang-javascript highlight"><c- a>var</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c->
<c- a>var</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> elem<c- p>.</c->ownerDocument<c- p>.</c->timeline<c- p>);</c->
animation<c- p>.</c->play<c- p>();</c-></pre>
      </div>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/animate(keyframes, options)" data-dfn-type="argument" data-export id="dom-animatable-animate-keyframes-options-keyframes"><code>keyframes</code></dfn>
        <dd data-md>
         <p>The <a data-link-type="dfn" href="#keyframe" id="ref-for-keyframe⑥⑨">keyframes</a> to use.
This value is passed to the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑥">KeyframeEffect(target, keyframes,
options)</a></code> constructor as the <var>keyframes</var> parameter and has the
same interpretation as defined for that constructor.</p>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/animate(keyframes, options)" data-dfn-type="argument" data-export id="dom-animatable-animate-keyframes-options-options"><code>options</code></dfn>
        <dd data-md>
         <p>The timing and animation options for the created <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①④">KeyframeEffect</a></code>.
This value is passed to the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑦">KeyframeEffect(target, keyframes,
options)</a></code> constructor as the <var>options</var> parameter and has the
same interpretation as defined for that constructor.</p>
       </dl>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable" data-dfn-type="method" data-export data-lt="getAnimations(options)|getAnimations()" id="dom-animatable-getanimations"><code> sequence&lt;Animation> getAnimations(options)</code></dfn>
     <dd data-md>
      <p>Returns the set of <a data-link-type="dfn" href="#relevant-animation" id="ref-for-relevant-animation">relevant</a> <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①①">Animation</a></code> objects
that contain at least one <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①⓪⑨">animation effect</a> whose <a data-link-type="dfn" href="#effect-target" id="ref-for-effect-target①⑧">effect target</a> is this object, or,
if an <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options①">options</a></code> parameter
is passed with <code class="idl"><a data-link-type="idl" href="#dom-getanimationsoptions-subtree" id="ref-for-dom-getanimationsoptions-subtree①">subtree</a></code> set to true,
an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant" id="ref-for-concept-tree-inclusive-descendant">inclusive descendant</a> of this object or a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑥">pseudo-element</a> of such a descendant.</p>
      <p>An <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦②">animation</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="relevant" data-lt="relevant animation" data-noexport id="relevant-animation">relevant</dfn> if:</p>
      <ul>
       <li data-md>
        <p>Its <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect③①">associated effect</a> is <a data-link-type="dfn" href="#current" id="ref-for-current②">current</a> <em>or</em> <a data-link-type="dfn" href="#in-effect" id="ref-for-in-effect⑥">in effect</a>, <em>and</em></p>
       <li data-md>
        <p>Its <a data-link-type="dfn" href="#replace-state" id="ref-for-replace-state⑨">replace state</a> is <em>not</em> <a data-link-type="dfn" href="#removed-replace-state" id="ref-for-removed-replace-state⑦">removed</a>.</p>
      </ul>
      <p>For the purposes of this method
a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑦">pseudo-element</a> is considered to be
a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child">child</a> of its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element②">originating element</a>.</p>
      <p>The returned list is sorted using the composite order described
for the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦③">animations</a> of effects in <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>.</p>
      <p>Calling this method triggers a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event①">style change event</a> for the <a data-link-type="dfn" href="#target-element" id="ref-for-target-element⑥">target
element</a>.
As a result, the returned list reflects the state <em>after</em> applying
any pending style changes to animation such as changes to animation-related
style properties that have yet to be processed.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animatable/getAnimations(options)" data-dfn-type="argument" data-export id="dom-animatable-getanimations-options-options"><code>options</code></dfn>
        <dd data-md>
         <p>Parameters governing the set of animations returned by <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations①">getAnimations()</a></code>.</p>
       </dl>
      </div>
    </dl>
   </div>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeAnimationOptions" data-dfn-type="dict-member" data-export id="dom-keyframeanimationoptions-id"><code>id</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①②">DOMString</a>, defaulting to <code>""</code></span>
     <dd data-md>
      <p>The string to assign to the generated <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①②">Animation</a></code>'s <code class="idl"><a data-link-type="idl" href="#dom-animation-id" id="ref-for-dom-animation-id②">id</a></code> attribute.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GetAnimationsOptions" data-dfn-type="dict-member" data-export id="dom-getanimationsoptions-subtree"><code>subtree</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③">boolean</a>, defaulting to <code>false</code></span>
     <dd data-md>
      <p>If true, indicates that <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦④">animations</a> associated with an <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①⓪">animation effect</a> whose <a data-link-type="dfn" href="#target-element" id="ref-for-target-element⑦">target element</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant①">descendant</a> of the object on which <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations②">getAnimations()</a></code> is called should also
be included in the result.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.9" id="extensions-to-the-document-interface"><span class="secno">6.9. </span><span class="content">Extensions to the <code>Document</code> interface</span><a class="self-link" href="#extensions-to-the-document-interface"></a></h3>
   <p>The following extensions are made to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①①">Document</a></code> interface defined in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#document" id="ref-for-document①②"><c- g>Document</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#documenttimeline" id="ref-for-documenttimeline②"><c- n>DocumentTimeline</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DocumentTimeline" href="#dom-document-timeline" id="ref-for-dom-document-timeline"><c- g>timeline</c-></a>;
};
</pre>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-timeline"><code>timeline</code></dfn>, <span> of type <a data-link-type="idl-name" href="#documenttimeline" id="ref-for-documenttimeline③">DocumentTimeline</a>, readonly</span>
     <dd data-md>
      <p>The <code class="idl"><a data-link-type="idl" href="#documenttimeline" id="ref-for-documenttimeline④">DocumentTimeline</a></code> object representing
the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline⑧">default document timeline</a>.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.10" id="extensions-to-the-documentorshadowroot-interface-mixin"><span class="secno">6.10. </span><span class="content">Extensions to the <code>DocumentOrShadowRoot</code> interface mixin</span><a class="self-link" href="#extensions-to-the-documentorshadowroot-interface-mixin"></a></h3>
   <p>The following extensions are made to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot">DocumentOrShadowRoot</a></code> interface
mixin defined in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot①"><c- g>DocumentOrShadowRoot</c-></a> {
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation①③"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-documentorshadowroot-getanimations" id="ref-for-dom-documentorshadowroot-getanimations"><c- g>getAnimations</c-></a>();
};
</pre>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DocumentOrShadowRoot" data-dfn-type="method" data-export data-lt="getAnimations()" id="dom-documentorshadowroot-getanimations"><code> sequence&lt;Animation> getAnimations()</code></dfn>
     <dd data-md>
      <p>Returns the set of <a data-link-type="dfn" href="#relevant-animation" id="ref-for-relevant-animation①">relevant</a> <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①④">Animation</a></code> objects
that have an associated <a data-link-type="dfn" href="#associated-effect" id="ref-for-associated-effect③②">associated effect</a> whose <a data-link-type="dfn" href="#target-element" id="ref-for-target-element⑧">target element</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant②">descendant</a> of
the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root">shadow root</a> on which this method is called.</p>
      <p>The returned list is sorted using the composite order described
for the associated <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑤">animations</a> of effects in <a href="#the-effect-stack">§ 5.4.2 The effect stack</a>.</p>
      <p>Calling this method triggers a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event②">style change event</a> for the document.
As a result, the returned list reflects the state <em>after</em> applying
any pending style changes to animation such as changes to animation-related
style properties that have yet to be processed.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.11" id="extensions-to-the-element-interface"><span class="secno">6.11. </span><span class="content">Extensions to the <code>Element</code> interface</span><a class="self-link" href="#extensions-to-the-element-interface"></a></h3>
   <p>Since DOM Elements may be the target of an animation,
the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧">Element</a></code> interface <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> is extended as follows:</p>
<pre class="idl highlight def"><a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨"><c- n>Element</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="#animatable" id="ref-for-animatable③"><c- n>Animatable</c-></a>;
</pre>
   <p>This allows the following kind of usage.</p>
   <div class="example" id="example-3abce906">
    <a class="self-link" href="#example-3abce906"></a>
<pre class="lang-javascript highlight">elem<c- p>.</c->animate<c- p>({</c-> color<c- o>:</c-> <c- t>'red'</c-> <c- p>},</c-> <c- mi>2000</c-><c- p>);</c-></pre>
   </div>
   <h3 class="heading settled" data-level="6.12" id="the-animationplaybackevent-interface"><span class="secno">6.12. </span><span class="content">The <code>AnimationPlaybackEvent</code> interface</span><a class="self-link" href="#the-animationplaybackevent-interface"></a></h3>
   <p><a data-link-type="dfn" href="#animation-playback-events" id="ref-for-animation-playback-events②">Animation playback events</a> are represented using the <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent③">AnimationPlaybackEvent</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationplaybackevent"><code><c- g>AnimationPlaybackEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-animationplaybackevent-animationplaybackevent" id="ref-for-dom-animationplaybackevent-animationplaybackevent"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="AnimationPlaybackEvent/AnimationPlaybackEvent(type, eventInitDict), AnimationPlaybackEvent/constructor(type, eventInitDict), AnimationPlaybackEvent/AnimationPlaybackEvent(type), AnimationPlaybackEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-animationplaybackeventinit" id="ref-for-dictdef-animationplaybackeventinit"><c- n>AnimationPlaybackEventInit</c-></a> <dfn class="idl-code" data-dfn-for="AnimationPlaybackEvent/AnimationPlaybackEvent(type, eventInitDict), AnimationPlaybackEvent/constructor(type, eventInitDict), AnimationPlaybackEvent/AnimationPlaybackEvent(type), AnimationPlaybackEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"></a></dfn> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑦"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime③"><c- g>currentTime</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑧"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime④"><c- g>timelineTime</c-></a>;
};
<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-animationplaybackeventinit"><code><c- g>AnimationPlaybackEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑨"><c- b>double</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="double? " href="#dom-animationplaybackeventinit-currenttime" id="ref-for-dom-animationplaybackeventinit-currenttime"><c- g>currentTime</c-></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⓪"><c- b>double</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="double? " href="#dom-animationplaybackeventinit-timelinetime" id="ref-for-dom-animationplaybackeventinit-timelinetime"><c- g>timelineTime</c-></a> = <c- b>null</c->;
};
</pre>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="constructor" data-export data-lt="AnimationPlaybackEvent(type, eventInitDict)|constructor(type, eventInitDict)|AnimationPlaybackEvent(type)|constructor(type)" id="dom-animationplaybackevent-animationplaybackevent"><code> AnimationPlaybackEvent(type, eventInitDict)</code></dfn>
     <dd data-md>
      <p>Constructs a new <code class="idl"><a data-link-type="idl" href="#animationplaybackevent" id="ref-for-animationplaybackevent④">AnimationPlaybackEvent</a></code> object using the procedure
defined for <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#constructing-events" id="ref-for-constructing-events">constructing events</a> <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>.</p>
    </dl>
   </div>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="attribute" data-export id="dom-animationplaybackevent-currenttime"><code>currentTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①">double</a>, readonly, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#current-time" id="ref-for-current-time⑤⑧">current time</a> of the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑥">animation</a> that generated the event at the
moment the event as queued.
This will be <code class="esvalue">null</code> if the <span id="ref-for-concept-animation⑦⑦">animation</span> was <a data-link-type="dfn" href="#idle-play-state" id="ref-for-idle-play-state⑦">idle</a> at the time the event was generated.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEvent" data-dfn-type="attribute" data-export id="dom-animationplaybackevent-timelinetime"><code>timelineTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③②">double</a>, readonly, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④③">time value</a> of the <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤④">timeline</a> with which the <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑦⑧">animation</a> that
generated the event is associated at the moment the event was queued.
This will be <code class="esvalue">null</code> if the <span id="ref-for-concept-animation⑦⑨">animation</span> was not
associated with an <a data-link-type="dfn" href="#inactive-timeline" id="ref-for-inactive-timeline①⑨">active timeline</a> at the
time the event was queued.</p>
    </dl>
   </div>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEventInit" data-dfn-type="dict-member" data-export id="dom-animationplaybackeventinit-currenttime"><code>currentTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③③">double</a>, nullable, defaulting to <code>null</code></span>
     <dd data-md>
      <p>See the description of the <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime④">currentTime</a></code> attribute.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationPlaybackEventInit" data-dfn-type="dict-member" data-export id="dom-animationplaybackeventinit-timelinetime"><code>timelineTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③④">double</a>, nullable, defaulting to <code>null</code></span>
     <dd data-md>
      <p>See the description of the <code class="idl"><a data-link-type="idl" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime⑤">timelineTime</a></code> attribute.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="6.13" id="model-liveness"><span class="secno">6.13. </span><span class="content">Model liveness</span><a class="self-link" href="#model-liveness"></a></h3>
   <p>Changes made to any part of the model, cause the entire timing model to be
updated and any dependent style.</p>
   <p>Unless otherwise stated,
invoking the methods or constructors,
or getting or setting the members
of interfaces defined in the programming interface section of this specification
does <em>not</em> produce a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event③">style change event</a>.</p>
   <p class="note" role="note"><span>Note:</span> Other specifications that extend this specification are expected to refine
the requirements on <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event④">style change events</a> by introducing circumstances where
such events <em>are</em> triggered.
For example,
when the interfaces in this specification represent
animations defined by CSS markup,
many of their methods will need to trigger <span id="ref-for-style-change-event⑤">style change events</span> in order to reflect changes to the specified style.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Based on the above requirement and normative requirements elsewhere
in this specification, the following invariants can be observed:</p>
    <dl>
     <dt data-md>Changes made to the Web Animations model take effect immediately
     <dd data-md>
      <p>For example, if the <code class="idl"><a data-link-type="idl" href="#keyframeeffect" id="ref-for-keyframeeffect①⑤">KeyframeEffect</a></code> associated with an <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑤">Animation</a></code> is seeked (see <a href="#setting-the-current-time-of-an-animation">§ 4.4.5 Setting the current time of an animation</a>) via the programming
interface, the value returned when querying the
animation’s <code>startTime</code> will reflect updated state of
the model immediately.</p>
      <div class="example" id="example-14eb88bc">
       <a class="self-link" href="#example-14eb88bc"></a> 
<pre class="lang-javascript highlight"><c- c1>// Initially animation.effect.getComputedTiming().localTime is 3000</c->
animation<c- p>.</c->currentTime <c- o>+=</c-> <c- mi>2000</c-><c- p>;</c->
alert<c- p>(</c->animation<c- p>.</c->effect<c- p>.</c->getComputedTiming<c- p>().</c->localTime<c- p>);</c-> <c- c1>// Displays ‘5000’</c-></pre>
      </div>
     <dt data-md>Querying the computed style of a property affected by animation
returns the fully up-to-date state of the animation
     <dd data-md>
      <p>For example, if the used style of an element is queried
immediately after applying a new <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑥">Animation</a></code> to that
element, the result of the new animation will be
incorporated in the value returned.</p>
      <div class="example" id="example-366bf7e4">
       <a class="self-link" href="#example-366bf7e4"></a> 
<pre class="lang-javascript highlight"><c- c1>// Set opacity to 0 immediately</c->
elem<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- p>{</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>});</c->
alert<c- p>(</c->window<c- p>.</c->getComputedStyle<c- p>(</c->elem<c- p>).</c->opacity<c- p>);</c-> <c- c1>// Displays ‘0’</c-></pre>
      </div>
     <dt data-md>Changes made within the same task are synchronized such
that the whole set of changes is rendered together
     <dd data-md>
      <p>As a result of changes to the model taking effect immediately
combined with ECMAScript’s run-to-completion semantics,
there should never be a situation where, for example, <em>only</em> the changes to specified style are rendered without
applying animation.</p>
      <div class="example" id="example-a559e918">
       <a class="self-link" href="#example-a559e918"></a> 
<pre class="lang-javascript highlight"><c- c1>// Fade the opacity with fallback for browsers that don’t</c->
<c- c1>// support Element.animate</c->
elem<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'0'</c-><c- p>;</c->
elem<c- p>.</c->animate<c- p>([</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mi>1</c-> <c- p>},</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>}</c-> <c- p>],</c-> <c- mi>500</c-><c- p>);</c-></pre>
      </div>
      <p class="note" role="note"><span>Note,</span> however, that in the example above, a user agent may render a
frame with <em>none</em> of the above changes applied.
This might happen, for example, if rendering occurs in
a separate process that is scheduled to run shortly after
the above task completes but before the changes
can be communicated to the process.</p>
     <dt data-md>The value returned by the <code>currentTime</code> attribute of
a <a data-link-type="dfn" href="#document-timeline" id="ref-for-document-timeline⑥">document timeline</a> will not change within a task
     <dd data-md>
      <p>Due to the requirement on <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑤">timelines</a> to update their <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①⓪">current time</a> each time the <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events④">update animations and send events</a> procedure is run,
querying the <code>currentTime</code> twice within
a long block of code that is executed in the same script block
will return the same value as shown in the following example.</p>
      <div class="example" id="example-16dafcc0">
       <a class="self-link" href="#example-16dafcc0"></a> 
<pre class="lang-javascript highlight"><c- a>var</c-> a <c- o>=</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>;</c->
<c- c1>// ... many lines of code ...</c->
<c- a>var</c-> b <c- o>=</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>;</c->
alert<c- p>(</c->b <c- o>-</c-> a<c- p>);</c-> <c- c1>// Displays 0</c-></pre>
      </div>
     <dt data-md>The time passed to a <code>requestAnimationFrame</code> callback
will be equal to <code>document.timeline.currentTime</code>
     <dd data-md>
      <p>Since HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a> defines that the procedure
to <a data-link-type="dfn" href="#update-animations-and-send-events" id="ref-for-update-animations-and-send-events⑤">update animations and send events</a> is performed prior to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks" id="ref-for-run-the-animation-frame-callbacks">running animation frame
callbacks</a>, and since the time passed to such callbacks is the same <var>now</var> timestamp is passed to both procedures, the <a data-link-type="dfn" href="#timeline-current-time" id="ref-for-timeline-current-time①①">current time</a> of a the <a data-link-type="dfn" href="#default-document-timeline" id="ref-for-default-document-timeline⑨">default document timeline</a> should
match the time passed to <code>requestAnimationFrame</code>.</p>
      <div class="example" id="example-a0637e5c">
       <a class="self-link" href="#example-a0637e5c"></a> 
<pre class="lang-javascript highlight">window<c- p>.</c->requestAnimationFrame<c- p>(</c-><c- a>function</c-><c- p>(</c->now<c- p>)</c-> <c- p>{</c->
  <c- c1>// Displays 0</c->
  alert<c- p>(</c->now <c- o>-</c-> document<c- p>.</c->timeline<c- p>.</c->currentTime<c- p>);</c->
<c- p>});</c-></pre>
      </div>
     <dt data-md>Calling methods from this programming interface will generally <em>not</em> cause transitions to be triggered
     <dd data-md>
      <p>Consider the following example:</p>
      <div class="example" id="example-a8ba32df">
       <a class="self-link" href="#example-a8ba32df"></a> 
<pre class="lang-javascript highlight"><c- c1>// Setup transition start point</c->
div<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'1'</c-><c- p>;</c->
getComputedStyle<c- p>(</c->div<c- p>).</c->opacity<c- p>;</c->

<c- c1>// Setup transition end point</c->
div<c- p>.</c->style<c- p>.</c->transition <c- o>=</c-> <c- t>'opacity 1s'</c-><c- p>;</c->
div<c- p>.</c->style<c- p>.</c->opacity <c- o>=</c-> <c- t>'0'</c-><c- p>;</c->

<c- c1>// Fire an animation</c->
div<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- p>[</c-><c- mf>0.5</c-><c- p>,</c-> <c- mi>1</c-><c- p>]</c-> <c- p>},</c-> <c- mi>500</c-><c- p>);</c->

<c- c1>// Wait for the transition to end -- the following will never be called!</c->
div<c- p>.</c->addEventListener<c- p>(</c-><c- t>'transitionend'</c-><c- p>,</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'transitionend'</c-><c- p>);</c->
<c- p>});</c-></pre>
      </div>
      <p>In this case, calling <code class="idl"><a data-link-type="idl" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate③">animate()</a></code> will <em>not</em> trigger a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#style-change-event" id="ref-for-style-change-event⑥">style change event</a>.
As a result, the pending style change will be processed at the same time
as the style change resulting from the new animation.
Since the animation style will override
the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#before-change-style" id="ref-for-before-change-style">before-change style</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#after-change-style" id="ref-for-after-change-style">after-change style</a>,
no transition will be generated and
the event handler for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions/#transitionend" id="ref-for-transitionend">transitionend</a> event will never be called.</p>
    </dl>
   </div>
   <h2 class="heading settled" data-level="7" id="integration-with-media-fragments"><span class="secno">7. </span><span class="content">Integration with Media Fragments</span><a class="self-link" href="#integration-with-media-fragments"></a></h2>
   <p>The Media Fragments specification <a data-link-type="biblio" href="#biblio-media-frags">[MEDIA-FRAGS]</a> defines a means
for addressing a temporal range of a media resource.
The application of media fragments depends on the MIME type of the
resource on which they are specified.
For resources with the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/mimereg.html#mime-registration" id="ref-for-mime-registration">SVG MIME type</a> <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>, the application of temporal parameters is defined in the <a href="https://svgwg.org/specs/animation-elements/"> Animation Elements</a> specification.</p>
   <p class="note" role="note"><span>Note:</span> media fragments are defined to operate on resources based on
    their MIME type.
    As a result, temporal addressing may not be supported in all situations
    where Web Animations content is used.</p>
   <h2 class="heading settled" data-level="8" id="interaction-with-page-display"><span class="secno">8. </span><span class="content">Interaction with page display</span><a class="self-link" href="#interaction-with-page-display"></a></h2>
   <p>HTML permits user agents to store <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state" id="ref-for-an-entry-with-persisted-user-state">user-agent defined state</a> along with
a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry" id="ref-for-session-history-entry">session history entry</a> so that as a user navigates between pages, the
previous state of the page can be restored including state such as
scroll position <a data-link-type="biblio" href="#biblio-html">[HTML]</a>.</p>
   <p>User agents that pause and resume <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element" id="ref-for-media-element①">media elements</a> when the referencing document is unloaded and traversed,
are encouraged to apply consistent handling to documents containing Web
Animations content.
If provided, this behavior SHOULD be achieved by adjusting the <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④④">time
values</a> of any <a data-link-type="dfn" href="#timeline" id="ref-for-timeline⑤⑥">timelines</a> that track wallclock time.</p>
   <p class="issue" id="issue-a128cfff"><a class="self-link" href="#issue-a128cfff"></a> Is this at odds with those <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑤">time values</a> being relative to <code>navigationStart</code> and with <code>requestAnimationFrame</code> using the same time as <code>document.timeline.currentTime</code>? <a href="https://github.com/w3c/csswg-drafts/issues/2083">&lt;https://github.com/w3c/csswg-drafts/issues/2083></a></p>
   <h2 class="heading settled" data-level="9" id="implementation-requirements"><span class="secno">9. </span><span class="content">Implementation requirements</span><a class="self-link" href="#implementation-requirements"></a></h2>
   <h3 class="heading settled" data-level="9.1" id="precision-of-time-values"><span class="secno">9.1. </span><span class="content">Precision of time values</span><a class="self-link" href="#precision-of-time-values"></a></h3>
   <p>The internal representation of time values is implementation dependent
however, it is RECOMMENDED that user agents be able to represent input
time values with microsecond precision so that a <a data-link-type="dfn" href="#time-value" id="ref-for-time-value④⑥">time value</a> (which
nominally represents milliseconds) of 0.001 is distinguishable from 0.0.</p>
   <h3 class="heading settled" data-level="9.2" id="conformance-criteria"><span class="secno">9.2. </span><span class="content">Conformance criteria</span><a class="self-link" href="#conformance-criteria"></a></h3>
   <p>This specification defines an abstract model for animation and, as
such, for user agents that do not support scripting, there are no
conformance criteria since there is no testable surface area.</p>
   <p>User agents that do not support scripting, however, may implement
additional technologies defined in terms of this specification in
which case the definitions provided in this specification will form
part of the conformance criteria of the additional technology.</p>
   <p>A <dfn data-dfn-type="dfn" data-export id="conforming-scripted-web-animations-user-agent">conforming scripted Web Animations user agent<a class="self-link" href="#conforming-scripted-web-animations-user-agent"></a></dfn> is a user
agent that implements the <abbr title="Application Programming Interface">API</abbr> defined in <a href="#programming-interface">§ 6 Programming interface</a>.</p>
   <h2 class="heading settled" data-level="10" id="acknowledgements"><span class="secno">10. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Thank you to Steve Block, Michael Giuffrida, Ryan Seys, and Eric Willigers
for their contributions to this specification.</p>
   <p>Thank you also to Michiel “Pomax” Kamermans for help with the
equations for a proposed smooth timing function although this feature
has been deferred to a subsequent specification.</p>
   <p>Our deep gratitude goes out to <a href="http://www.endemolshine.com.au">Southern Star
Animation</a> for their kind generosity and patience in introducing the
editors to the processes and techniques used producing broadcast
animations.</p>
   <h2 class="heading settled" data-level="11" id="changes-since-last-publication"><span class="secno">11. </span><span class="content">Changes since last publication</span><a class="self-link" href="#changes-since-last-publication"></a></h2>
   <p>The following changes have been made since the <a href="https://www.w3.org/TR/2018/WD-web-animations-1-20181011/">11 October
2018 Working Draft</a>:</p>
   <ul>
    <li data-md>
     <p>Made the definition of a <a data-link-type="dfn" href="#current" id="ref-for-current③">current</a> <a data-link-type="dfn" href="#animation-effect" id="ref-for-animation-effect①①①">animation effect</a> incorporate the
associated animation’s <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate④⑥">playback rate</a> (<a href="https://github.com/w3c/csswg-drafts/issues/3193">#3193</a>).</p>
    <li data-md>
     <p>Updated the steps for resolving which properties to use when calculating <a data-link-type="dfn" href="#computed-keyframes" id="ref-for-computed-keyframes③">computed keyframes</a> when physical and logical properties are used.</p>
    <li data-md>
     <p>Introduced steps for removing animations that have been overridden: <a href="#replacing-animations">§ 5.5 Replacing animations</a>.</p>
     <ul>
      <li data-md>
       <p>Added a new <a data-link-type="dfn" href="#remove-event" id="ref-for-remove-event②">remove event</a> to signal when this process occurs.</p>
      <li data-md>
       <p>Added corresponding IDL members to the <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑦">Animation</a></code> interface: <code class="idl"><a data-link-type="idl" href="#dom-animation-replacestate" id="ref-for-dom-animation-replacestate①">replaceState</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-animation-onremove" id="ref-for-dom-animation-onremove①">onremove</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-animation-persist" id="ref-for-dom-animation-persist②">persist</a></code>.</p>
     </ul>
    <li data-md>
     <p>Added the <code class="idl"><a data-link-type="idl" href="#dom-animation-commitstyles" id="ref-for-dom-animation-commitstyles①">commitStyles</a></code> method to the <code class="idl"><a data-link-type="idl" href="#animation" id="ref-for-animation①⑧">Animation</a></code> interface
to allow preserving the result of an <a data-link-type="dfn" href="#concept-animation" id="ref-for-concept-animation⑧⓪">animation</a> that has been removed.</p>
    <li data-md>
     <p>Added an <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options②">options</a></code> parameter to the <code class="idl"><a data-link-type="idl" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations③">getAnimations()</a></code> method on the <code class="idl"><a data-link-type="idl" href="#animatable" id="ref-for-animatable④">Animatable</a></code> interface
to allow fetching all animations on descendants of a particular element.</p>
    <li data-md>
     <p>Moved the definition of <code class="idl"><a data-link-type="idl" href="#dom-documentorshadowroot-getanimations" id="ref-for-dom-documentorshadowroot-getanimations①">getAnimations()</a></code> from the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/#document" id="ref-for-document①③">Document</a></code> interface to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot②">DocumentOrShadowRoot</a></code> interface mixin
so that it can be used with <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#shadowroot" id="ref-for-shadowroot">ShadowRoot</a></code>s as well.</p>
   </ul>
   <p>The <a href="https://github.com/w3c/csswg-drafts/commits/master/web-animations-1">changelog</a> provides a more detailed history.</p>
   <h2 class="heading settled" id="animation-types"><span class="content">Appendix A: Animation types of existing properties</span><a class="self-link" href="#animation-types"></a></h2>
   <p>Typically the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①⓪">animation type</a> of a property is included along with its
definition.
However, for some properties defined in older or very mature specifications
the <span id="ref-for-animation-type①①">animation type</span> information is not included.
All such properties are assumed to have an <span id="ref-for-animation-type①②">animation type</span> of <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value③">by computed value</a> unless they are one of the exceptions listed below.</p>
   <h3 class="heading settled" id="animating-font-weight"><span class="content">Animation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a></span><a class="self-link" href="#animating-font-weight"></a></h3>
   <p><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight①">font-weight</a> property values prior to level 4 are <a href="https://www.w3.org/TR/css-values-4/#combining-values">combined</a> as follows:</p>
   <ul>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation②">Interpolated</a> via discrete steps (multiples of 100).
The interpolation happens in real number space as for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a>s
and is converted to an integer by rounding to the nearest multiple of 100,
with values halfway between multiples of 100 rounded towards positive
infinity.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition③">Addition</a> of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight②">font-weight</a> values is defined as <var>V<sub>result</sub></var> = <var>V<sub>a</sub></var> + <var>V<sub>b</sub></var></p>
   </ul>
   <p class="note" role="note"><span>Note:</span> This definition is obsoleted by <a data-link-type="biblio" href="#biblio-css-fonts-4">[CSS-FONTS-4]</a> where
the requirement that a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight③">font-weight</a> value be a multiple of 100 is dropped.
At that point the <a data-link-type="dfn" href="#animation-type" id="ref-for-animation-type①③">animation type</a> for <span class="property" id="ref-for-propdef-font-weight④">font-weight</span> is simply <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value④">by computed value</a>.</p>
   <h3 class="heading settled" id="animating-visibility"><span class="content">Animation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a></span><a class="self-link" href="#animating-visibility"></a></h3>
   <p>For the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility①">visibility</a> property, <span class="css">visible</span> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation③">interpolated</a> as a discrete step
where values of <var>p</var> between 0 and 1
map to <span class="css">visible</span> and other values of <var>p</var> map to the closer endpoint;
if neither value is <span class="css">visible</span> then <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑤">discrete</a> animation is used.</p>
   <h3 class="heading settled" id="animating-shadow-lists"><span class="content">Animation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a></span><a class="self-link" href="#animating-shadow-lists"></a></h3>
   <p>Animation the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow①">box-shadow</a> property follows the procedures for <a href="https://www.w3.org/TR/css-values-4/#combining-values">combining</a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="shadow lists" data-lt="combining shadow lists" id="combining-shadow-lists">shadow lists</dfn> as follows:</p>
   <p>Each shadow in the list
(treating <span class="css">none</span> as a 0-length list)
is interpolated component-wise as with <a data-link-type="dfn" href="#by-computed-value" id="ref-for-by-computed-value⑤">by computed value</a> behavior.
However, if both input shadows are <span class="css">inset</span> or both input shadows are not <span class="css">inset</span>,
then the interpolated shadow must match the input shadows in that regard.
If any pair of input shadows has one <span class="css">inset</span> and the other not <span class="css">inset</span>,
the entire shadow-list uses <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑥">discrete</a> animation.
If the lists of shadows have different lengths,
then the shorter list is padded at the end
with shadows whose color is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a>,
all lengths are <span class="css">0</span>,
and whose <span class="css">inset</span> (or not) matches the longer list.</p>
   <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#addition" id="ref-for-addition④">Addition</a> of two <a data-link-type="dfn" href="#combining-shadow-lists" id="ref-for-combining-shadow-lists">shadow lists</a> <var>V<sub>a</sub></var> and <var>V<sub>b</sub></var> is defined as <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> concatenation such that <var>V<sub>result</sub></var> is equal to <var>V<sub>a</sub></var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-extend" id="ref-for-list-extend">extended</a> with <var>V<sub>b</sub></var>.</p>
   <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation③">Accumulation</a> of <a data-link-type="dfn" href="#combining-shadow-lists" id="ref-for-combining-shadow-lists①">shadow lists</a> follows the
matching rules for interpolation above, performing addition on each component
according to its type, or falling back to <a data-link-type="dfn" href="#discrete" id="ref-for-discrete⑦">discrete</a> animation if the <span class="css">inset</span> values do not match.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-compositeoperation-accumulate">accumulate</a><span>, in §6.7</span>
   <li><a href="#dom-compositeoperation-accumulate">"accumulate"</a><span>, in §6.7</span>
   <li><a href="#dom-animationreplacestate-active">"active"</a><span>, in §6.4.2</span>
   <li><a href="#active-after-boundary-time">active-after boundary time</a><span>, in §4.5.5</span>
   <li><a href="#active-duration">active duration</a><span>, in §4.8.2</span>
   <li><a href="#dom-computedeffecttiming-activeduration">activeDuration</a><span>, in §6.5.5</span>
   <li><a href="#active-interval">active interval</a><span>, in §4.5.3</span>
   <li><a href="#active-phase">active phase</a><span>, in §4.5.5</span>
   <li><a href="#active-replace-state">active replace state</a><span>, in §5.5.1</span>
   <li><a href="#active-time">active time</a><span>, in §4.8.3.1</span>
   <li><a href="#dom-compositeoperation-add">add</a><span>, in §6.7</span>
   <li><a href="#dom-compositeoperation-add">"add"</a><span>, in §6.7</span>
   <li><a href="#after-phase">after phase</a><span>, in §4.5.5</span>
   <li><a href="#dom-playbackdirection-alternate">"alternate"</a><span>, in §6.5.3</span>
   <li><a href="#dom-playbackdirection-alternate-reverse">"alternate-reverse"</a><span>, in §6.5.3</span>
   <li><a href="#concept-animatable">animatable</a><span>, in §5.2</span>
   <li><a href="#animatable">Animatable</a><span>, in §6.8</span>
   <li><a href="#dom-animatable-animate">animate(keyframes)</a><span>, in §6.8</span>
   <li><a href="#dom-animatable-animate">animate(keyframes, options)</a><span>, in §6.8</span>
   <li><a href="#concept-animation">animation</a><span>, in §4.4</span>
   <li><a href="#dom-animation-animation">Animation()</a><span>, in §6.4</span>
   <li><a href="#animation">Animation</a><span>, in §6.4</span>
   <li><a href="#animation-class">animation class</a><span>, in §5.4.1</span>
   <li><a href="#animation-composite-order">animation composite order</a><span>, in §5.4.2</span>
   <li><a href="#animation-direction">animation direction</a><span>, in §4.5.5</span>
   <li><a href="#animationeffect">AnimationEffect</a><span>, in §6.5</span>
   <li><a href="#dom-animation-animation">Animation(effect)</a><span>, in §6.4</span>
   <li><a href="#animation-effect">animation effect</a><span>, in §4.5</span>
   <li><a href="#dom-animation-animation">Animation(effect, timeline)</a><span>, in §6.4</span>
   <li><a href="#animation-events">Animation events</a><span>, in §4.4.19</span>
   <li><a href="#animation-frame">animation frame</a><span>, in §4.3</span>
   <li><a href="#animationplaybackevent">AnimationPlaybackEvent</a><span>, in §6.12</span>
   <li><a href="#dictdef-animationplaybackeventinit">AnimationPlaybackEventInit</a><span>, in §6.12</span>
   <li><a href="#animation-playback-events">animation playback events</a><span>, in §4.4.19.2</span>
   <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type)</a><span>, in §6.12</span>
   <li><a href="#dom-animationplaybackevent-animationplaybackevent">AnimationPlaybackEvent(type, eventInitDict)</a><span>, in §6.12</span>
   <li><a href="#enumdef-animationplaystate">AnimationPlayState</a><span>, in §6.4.1</span>
   <li><a href="#animation-property-name-to-idl-attribute-name">animation property name to IDL attribute name</a><span>, in §6.6.2</span>
   <li><a href="#enumdef-animationreplacestate">AnimationReplaceState</a><span>, in §6.4.2</span>
   <li><a href="#animationtimeline">AnimationTimeline</a><span>, in §6.2</span>
   <li><a href="#animation-time-to-origin-relative-time">animation time to origin-relative time</a><span>, in §4.4.19.1</span>
   <li><a href="#animation-time-to-timeline-time">animation time to timeline time</a><span>, in §4.4.19.1</span>
   <li><a href="#animation-type">Animation type</a><span>, in §5.2</span>
   <li><a href="#apply-any-pending-playback-rate">apply any pending playback rate</a><span>, in §4.4.16.2</span>
   <li><a href="#associated-animation-of-an-animation-effect">associated animation of an animation effect</a><span>, in §5.4.2</span>
   <li><a href="#associated-effect">associated effect</a><span>, in §4.4</span>
   <li><a href="#associated-effect-end">associated effect end</a><span>, in §4.4.13</span>
   <li><a href="#associated-with-an-animation">associated with an animation</a><span>, in §4.5.1</span>
   <li><a href="#associated-with-a-timeline">associated with a timeline</a><span>, in §4.5.1</span>
   <li>
    "auto"
    <ul>
     <li><a href="#dom-compositeoperationorauto-auto">enum-value for CompositeOperationOrAuto</a><span>, in §6.7</span>
     <li><a href="#dom-fillmode-auto">enum-value for FillMode</a><span>, in §6.5.2</span>
    </ul>
   <li><a href="#dom-compositeoperationorauto-auto">auto</a><span>, in §6.7</span>
   <li><a href="#dom-fillmode-backwards">"backwards"</a><span>, in §6.5.2</span>
   <li><a href="#dictdef-basecomputedkeyframe">BaseComputedKeyframe</a><span>, in §6.6</span>
   <li><a href="#dictdef-basekeyframe">BaseKeyframe</a><span>, in §6.6.3</span>
   <li><a href="#dictdef-basepropertyindexedkeyframe">BasePropertyIndexedKeyframe</a><span>, in §6.6.3</span>
   <li><a href="#before-active-boundary-time">before-active boundary time</a><span>, in §4.5.5</span>
   <li><a href="#before-phase">before phase</a><span>, in §4.5.5</span>
   <li><a href="#dom-fillmode-both">"both"</a><span>, in §6.5.2</span>
   <li><a href="#by-computed-value">by computed value</a><span>, in §5.2</span>
   <li><a href="#dom-animation-cancel">cancel()</a><span>, in §6.4</span>
   <li><a href="#cancel-an-animation">cancel an animation</a><span>, in §4.4.15</span>
   <li><a href="#cancel-event">cancel event</a><span>, in §4.4.19.3</span>
   <li><a href="#check-the-completion-record">check the completion record</a><span>, in §6.6.3</span>
   <li><a href="#combining-shadow-lists">combining shadow lists</a><span>, in §Unnumbered section</span>
   <li><a href="#commit-computed-styles">commit computed styles</a><span>, in §6.4</span>
   <li><a href="#dom-animation-commitstyles">commitStyles()</a><span>, in §6.4</span>
   <li>
    composite
    <ul>
     <li><a href="#dom-keyframeeffect-composite">attribute for KeyframeEffect</a><span>, in §6.6</span>
     <li><a href="#composite">definition of</a><span>, in §5.4</span>
     <li><a href="#dom-basecomputedkeyframe-composite">dict-member for BaseComputedKeyframe</a><span>, in §6.6</span>
     <li><a href="#dom-basekeyframe-composite">dict-member for BaseKeyframe</a><span>, in §6.6.3</span>
     <li><a href="#dom-basepropertyindexedkeyframe-composite">dict-member for BasePropertyIndexedKeyframe</a><span>, in §6.6.3</span>
     <li><a href="#dom-keyframeeffectoptions-composite">dict-member for KeyframeEffectOptions</a><span>, in §6.6.4</span>
    </ul>
   <li><a href="#composited-value">composited value</a><span>, in §5.4.3</span>
   <li>
    CompositeOperation
    <ul>
     <li><a href="#enumdef-compositeoperation">(enum)</a><span>, in §6.7</span>
     <li><a href="#compositeoperation">definition of</a><span>, in §6.7</span>
    </ul>
   <li><a href="#composite-operation">composite operation</a><span>, in §5.4.4</span>
   <li><a href="#composite-operation-accumulate">composite operation accumulate</a><span>, in §5.4.4</span>
   <li><a href="#composite-operation-add">composite operation add</a><span>, in §5.4.4</span>
   <li><a href="#enumdef-compositeoperationorauto">CompositeOperationOrAuto</a><span>, in §6.7</span>
   <li><a href="#composite-operation-replace">composite operation replace</a><span>, in §5.4.4</span>
   <li><a href="#animation-composite-order">composite order</a><span>, in §5.4.2</span>
   <li><a href="#composite">composition</a><span>, in §5.4</span>
   <li><a href="#dictdef-computedeffecttiming">ComputedEffectTiming</a><span>, in §6.5.5</span>
   <li><a href="#computed-keyframe-offset">computed keyframe offset</a><span>, in §5.3.2</span>
   <li><a href="#computed-keyframes">computed keyframes</a><span>, in §5.3.2</span>
   <li><a href="#dom-basecomputedkeyframe-computedoffset">computedOffset</a><span>, in §6.6</span>
   <li><a href="#compute-missing-keyframe-offsets">compute missing keyframe offsets</a><span>, in §5.3.2</span>
   <li><a href="#conforming-scripted-web-animations-user-agent">conforming scripted Web Animations user agent</a><span>, in §9.2</span>
   <li>
    constructor()
    <ul>
     <li><a href="#dom-animation-animation">constructor for Animation</a><span>, in §6.4</span>
     <li><a href="#dom-documenttimeline-documenttimeline">constructor for DocumentTimeline</a><span>, in §6.3</span>
    </ul>
   <li><a href="#dom-animation-animation">constructor(effect)</a><span>, in §6.4</span>
   <li><a href="#dom-animation-animation">constructor(effect, timeline)</a><span>, in §6.4</span>
   <li><a href="#dom-documenttimeline-documenttimeline">constructor(options)</a><span>, in §6.3</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect-source">constructor(source)</a><span>, in §6.6</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect">constructor(target, keyframes)</a><span>, in §6.6</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect">constructor(target, keyframes, options)</a><span>, in §6.6</span>
   <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type)</a><span>, in §6.12</span>
   <li><a href="#dom-animationplaybackevent-animationplaybackevent">constructor(type, eventInitDict)</a><span>, in §6.12</span>
   <li><a href="#current">current</a><span>, in §4.5.5</span>
   <li><a href="#current-finished-promise">current finished promise</a><span>, in §4.4.12</span>
   <li><a href="#current-iteration">current iteration</a><span>, in §4.8.4</span>
   <li><a href="#dom-computedeffecttiming-currentiteration">currentIteration</a><span>, in §6.5.5</span>
   <li><a href="#current-ready-promise">current ready promise</a><span>, in §4.4.8</span>
   <li><a href="#current-time">current time</a><span>, in §4.4.4</span>
   <li>
    currentTime
    <ul>
     <li><a href="#dom-animation-currenttime">attribute for Animation</a><span>, in §6.4</span>
     <li><a href="#dom-animationplaybackevent-currenttime">attribute for AnimationPlaybackEvent</a><span>, in §6.12</span>
     <li><a href="#dom-animationtimeline-currenttime">attribute for AnimationTimeline</a><span>, in §6.2</span>
     <li><a href="#dom-animationplaybackeventinit-currenttime">dict-member for AnimationPlaybackEventInit</a><span>, in §6.12</span>
    </ul>
   <li><a href="#default-document-timeline">default document timeline</a><span>, in §4.3.2</span>
   <li>
    delay
    <ul>
     <li><a href="#dom-effecttiming-delay">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-delay">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#directed-progress">directed progress</a><span>, in §4.9.1</span>
   <li>
    direction
    <ul>
     <li><a href="#dom-effecttiming-direction">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-direction">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#discrete">discrete</a><span>, in §5.2</span>
   <li><a href="#document-for-timing">document for timing</a><span>, in §4.4</span>
   <li><a href="#document-timeline">document timeline</a><span>, in §4.3.1</span>
   <li><a href="#dom-documenttimeline-documenttimeline">DocumentTimeline()</a><span>, in §6.3</span>
   <li><a href="#documenttimeline">DocumentTimeline</a><span>, in §6.3</span>
   <li><a href="#dictdef-documenttimelineoptions">DocumentTimelineOptions</a><span>, in §6.3</span>
   <li><a href="#dom-documenttimeline-documenttimeline">DocumentTimeline(options)</a><span>, in §6.3</span>
   <li>
    duration
    <ul>
     <li><a href="#dom-effecttiming-duration">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-duration">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li>
    easing
    <ul>
     <li><a href="#dom-basecomputedkeyframe-easing">dict-member for BaseComputedKeyframe</a><span>, in §6.6</span>
     <li><a href="#dom-basekeyframe-easing">dict-member for BaseKeyframe</a><span>, in §6.6.3</span>
     <li><a href="#dom-basepropertyindexedkeyframe-easing">dict-member for BasePropertyIndexedKeyframe</a><span>, in §6.6.3</span>
     <li><a href="#dom-effecttiming-easing">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-easing">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#dom-animation-effect">effect</a><span>, in §6.4</span>
   <li><a href="#effective-playback-rate">effective playback rate</a><span>, in §4.4.16.2</span>
   <li><a href="#effect-stack">effect stack</a><span>, in §5.4.2</span>
   <li><a href="#effect-target">effect target</a><span>, in §5.3</span>
   <li><a href="#dictdef-effecttiming">EffectTiming</a><span>, in §6.5.1</span>
   <li><a href="#effect-value">effect value</a><span>, in §5.1</span>
   <li><a href="#end-delay">end delay</a><span>, in §4.5.3</span>
   <li>
    endDelay
    <ul>
     <li><a href="#dom-effecttiming-enddelay">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-enddelay">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#dom-computedeffecttiming-endtime">endTime</a><span>, in §6.5.5</span>
   <li><a href="#end-time">end time</a><span>, in §4.5.3</span>
   <li>
    fill
    <ul>
     <li><a href="#dom-effecttiming-fill">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-fill">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#fill-mode">fill mode</a><span>, in §4.6</span>
   <li><a href="#enumdef-fillmode">FillMode</a><span>, in §6.5.2</span>
   <li><a href="#dom-animation-finish">finish()</a><span>, in §6.4</span>
   <li><a href="#finish-an-animation">finish an animation</a><span>, in §4.4.14</span>
   <li><a href="#dom-animation-finished">finished</a><span>, in §6.4</span>
   <li><a href="#dom-animationplaystate-finished">"finished"</a><span>, in §6.4.1</span>
   <li><a href="#finished-play-state">finished play state</a><span>, in §4.4.18</span>
   <li><a href="#finish-event">finish event</a><span>, in §4.4.19.3</span>
   <li><a href="#finish-notification-steps">finish notification steps</a><span>, in §4.4.13</span>
   <li><a href="#dom-fillmode-forwards">"forwards"</a><span>, in §6.5.2</span>
   <li>
    getAnimations()
    <ul>
     <li><a href="#dom-animatable-getanimations">method for Animatable</a><span>, in §6.8</span>
     <li><a href="#dom-documentorshadowroot-getanimations">method for DocumentOrShadowRoot</a><span>, in §6.10</span>
    </ul>
   <li><a href="#dom-animatable-getanimations">getAnimations(options)</a><span>, in §6.8</span>
   <li><a href="#dictdef-getanimationsoptions">GetAnimationsOptions</a><span>, in §6.8</span>
   <li><a href="#dom-animationeffect-getcomputedtiming">getComputedTiming()</a><span>, in §6.5</span>
   <li><a href="#dom-keyframeeffect-getkeyframes">getKeyframes()</a><span>, in §6.6</span>
   <li><a href="#dom-animationeffect-gettiming">getTiming()</a><span>, in §6.5</span>
   <li><a href="#global-animation-list">global animation list</a><span>, in §4.4</span>
   <li><a href="#hold-time">hold time</a><span>, in §4.4</span>
   <li>
    id
    <ul>
     <li><a href="#dom-animation-id">attribute for Animation</a><span>, in §6.4</span>
     <li><a href="#dom-keyframeanimationoptions-id">dict-member for KeyframeAnimationOptions</a><span>, in §6.8</span>
    </ul>
   <li><a href="#idl-attribute-name-to-animation-property-name">IDL attribute name to animation property name</a><span>, in §6.6.2</span>
   <li><a href="#dom-animationplaystate-idle">"idle"</a><span>, in §6.4.1</span>
   <li><a href="#idle-phase">idle phase</a><span>, in §4.5.5</span>
   <li><a href="#idle-play-state">idle play state</a><span>, in §4.4.18</span>
   <li><a href="#inactive-timeline">inactive timeline</a><span>, in §4.3</span>
   <li><a href="#in-effect">in effect</a><span>, in §4.5.5</span>
   <li><a href="#in-play">in play</a><span>, in §4.5.5</span>
   <li><a href="#iteration-count">iteration count</a><span>, in §4.7.2</span>
   <li><a href="#iteration-duration">iteration duration</a><span>, in §4.7.1</span>
   <li><a href="#iteration-interval">iteration interval</a><span>, in §4.7.1</span>
   <li><a href="#iteration-progress">iteration progress</a><span>, in §4.11</span>
   <li>
    iterations
    <ul>
     <li><a href="#dom-effecttiming-iterations">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-iterations">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li>
    iterationStart
    <ul>
     <li><a href="#dom-effecttiming-iterationstart">dict-member for EffectTiming</a><span>, in §6.5.1</span>
     <li><a href="#dom-optionaleffecttiming-iterationstart">dict-member for OptionalEffectTiming</a><span>, in §6.5.1</span>
    </ul>
   <li><a href="#iteration-start">iteration start</a><span>, in §4.7.2</span>
   <li><a href="#keyframe">keyframe</a><span>, in §5.3.1</span>
   <li><a href="#dictdef-keyframeanimationoptions">KeyframeAnimationOptions</a><span>, in §6.8</span>
   <li><a href="#keyframeeffect">KeyframeEffect</a><span>, in §6.6</span>
   <li><a href="#keyframe-effect">keyframe effect</a><span>, in §5.3</span>
   <li><a href="#dictdef-keyframeeffectoptions">KeyframeEffectOptions</a><span>, in §6.6.4</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect-source">KeyframeEffect(source)</a><span>, in §6.6</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes)</a><span>, in §6.6</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes, options)</a><span>, in §6.6</span>
   <li><a href="#keyframe-offset">keyframe offset</a><span>, in §5.3.1</span>
   <li><a href="#keyframe-specific-composite-operation">keyframe-specific composite operation</a><span>, in §5.3.1</span>
   <li><a href="#dom-computedeffecttiming-localtime">localTime</a><span>, in §6.5.5</span>
   <li><a href="#local-time">local time</a><span>, in §4.5.4</span>
   <li><a href="#loosely-sorted-by-offset">loosely sorted by offset</a><span>, in §5.3.1</span>
   <li><a href="#monotonically-increasing-timeline">monotonically increasing</a><span>, in §4.3</span>
   <li><a href="#monotonically-increasing-timeline">monotonically increasing timeline</a><span>, in §4.3</span>
   <li><a href="#neutral-value-for-composition">neutral value for composition</a><span>, in §5.3.3</span>
   <li><a href="#dom-fillmode-none">"none"</a><span>, in §6.5.2</span>
   <li><a href="#dom-playbackdirection-normal">"normal"</a><span>, in §6.5.3</span>
   <li><a href="#not-animatable">not animatable</a><span>, in §5.2</span>
   <li>
    offset
    <ul>
     <li><a href="#dom-basecomputedkeyframe-offset">dict-member for BaseComputedKeyframe</a><span>, in §6.6</span>
     <li><a href="#dom-basekeyframe-offset">dict-member for BaseKeyframe</a><span>, in §6.6.3</span>
     <li><a href="#dom-basepropertyindexedkeyframe-offset">dict-member for BasePropertyIndexedKeyframe</a><span>, in §6.6.3</span>
    </ul>
   <li><a href="#offsetk">offsetk</a><span>, in §5.3.2</span>
   <li><a href="#dom-animation-oncancel">oncancel</a><span>, in §6.4</span>
   <li><a href="#dom-animation-onfinish">onfinish</a><span>, in §6.4</span>
   <li><a href="#dom-animation-onremove">onremove</a><span>, in §6.4</span>
   <li><a href="#dictdef-optionaleffecttiming">OptionalEffectTiming</a><span>, in §6.5.1</span>
   <li><a href="#dom-documenttimelineoptions-origintime">originTime</a><span>, in §6.3</span>
   <li><a href="#origin-time">origin time</a><span>, in §4.3.1</span>
   <li><a href="#overall-progress">overall progress</a><span>, in §4.8.3.2</span>
   <li><a href="#dom-animation-pause">pause()</a><span>, in §6.4</span>
   <li><a href="#pause-an-animation">pause an animation</a><span>, in §4.4.10</span>
   <li><a href="#dom-animationplaystate-paused">"paused"</a><span>, in §6.4.1</span>
   <li><a href="#paused-play-state">paused play state</a><span>, in §4.4.18</span>
   <li><a href="#dom-animation-pending">pending</a><span>, in §6.4</span>
   <li><a href="#pending-animation-event-queue">pending animation event queue</a><span>, in §4.4.19</span>
   <li><a href="#pending-pause-task">pending pause task</a><span>, in §4.4.10</span>
   <li><a href="#pending-playback-rate">pending playback rate</a><span>, in §4.4.16.2</span>
   <li><a href="#pending-play-task">pending play task</a><span>, in §4.4.9</span>
   <li><a href="#dom-animation-persist">persist()</a><span>, in §6.4</span>
   <li><a href="#dom-animationreplacestate-persisted">"persisted"</a><span>, in §6.4.2</span>
   <li><a href="#persisted-replace-state">persisted replace state</a><span>, in §5.5.1</span>
   <li><a href="#dom-animation-play">play()</a><span>, in §6.4</span>
   <li><a href="#play-an-animation">play an animation</a><span>, in §4.4.9</span>
   <li><a href="#playback-direction">playback direction</a><span>, in §4.9</span>
   <li><a href="#enumdef-playbackdirection">PlaybackDirection</a><span>, in §6.5.3</span>
   <li><a href="#dom-animation-playbackrate">playbackRate</a><span>, in §6.4</span>
   <li><a href="#playback-rate">playback rate</a><span>, in §4.4.16</span>
   <li><a href="#dom-animation-playstate">playState</a><span>, in §6.4</span>
   <li><a href="#play-state">play state</a><span>, in §4.4.18</span>
   <li><a href="#previous-current-time">previous current time</a><span>, in §4.4.13</span>
   <li><a href="#process-a-keyframe-like-object">process a keyframe-like object</a><span>, in §6.6.3</span>
   <li><a href="#process-a-keyframes-argument">process a keyframes argument</a><span>, in §6.6.3</span>
   <li><a href="#dom-computedeffecttiming-progress">progress</a><span>, in §6.5.5</span>
   <li>
    pseudoElement
    <ul>
     <li><a href="#dom-keyframeeffect-pseudoelement">attribute for KeyframeEffect</a><span>, in §6.6</span>
     <li><a href="#dom-keyframeeffectoptions-pseudoelement">dict-member for KeyframeEffectOptions</a><span>, in §6.6.4</span>
    </ul>
   <li>
    ready
    <ul>
     <li><a href="#dom-animation-ready">attribute for Animation</a><span>, in §6.4</span>
     <li><a href="#ready">definition of</a><span>, in §4.4.7</span>
    </ul>
   <li><a href="#relevant-animation">relevant</a><span>, in §6.8</span>
   <li><a href="#relevant-animation">relevant animation</a><span>, in §6.8</span>
   <li><a href="#dom-animationreplacestate-removed">"removed"</a><span>, in §6.4.2</span>
   <li><a href="#removed-replace-state">removed replace state</a><span>, in §5.5.1</span>
   <li><a href="#remove-event">remove event</a><span>, in §4.4.19.3</span>
   <li><a href="#remove-replaced-animations">remove replaced animations</a><span>, in §5.5.2</span>
   <li><a href="#repeatable-list">repeatable list</a><span>, in §5.2</span>
   <li><a href="#dom-compositeoperation-replace">replace</a><span>, in §6.7</span>
   <li><a href="#dom-compositeoperation-replace">"replace"</a><span>, in §6.7</span>
   <li><a href="#replaceable-animation">replaceable</a><span>, in §5.5.2</span>
   <li><a href="#replaceable-animation">replaceable animation</a><span>, in §5.5.2</span>
   <li><a href="#replace-state">replace state</a><span>, in §5.5.1</span>
   <li><a href="#dom-animation-replacestate">replaceState</a><span>, in §6.4</span>
   <li><a href="#reset-an-animations-pending-tasks">reset an animation’s pending tasks</a><span>, in §4.4.3</span>
   <li><a href="#dom-animation-reverse">reverse()</a><span>, in §6.4</span>
   <li><a href="#dom-playbackdirection-reverse">"reverse"</a><span>, in §6.5.3</span>
   <li><a href="#reverse-an-animation">reverse an animation</a><span>, in §4.4.17</span>
   <li><a href="#dom-animationplaystate-running">"running"</a><span>, in §6.4.1</span>
   <li><a href="#running-play-state">running play state</a><span>, in §4.4.18</span>
   <li><a href="#scheduled-event-time">scheduled event time</a><span>, in §4.4.19</span>
   <li><a href="#seamlessly-update-the-playback-rate">seamlessly update the playback rate</a><span>, in §4.4.16.2</span>
   <li><a href="#dom-keyframeeffect-setkeyframes">setKeyframes(keyframes)</a><span>, in §6.6</span>
   <li><a href="#set-the-associated-effect-of-an-animation">set the associated effect of an animation</a><span>, in §4.4.3</span>
   <li><a href="#set-the-current-time">set the current time</a><span>, in §4.4.5</span>
   <li><a href="#set-the-playback-rate">set the playback rate</a><span>, in §4.4.16.1</span>
   <li><a href="#set-the-start-time">set the start time</a><span>, in §4.4.6</span>
   <li><a href="#set-the-timeline-of-an-animation">set the timeline of an animation</a><span>, in §4.4.1</span>
   <li><a href="#combining-shadow-lists">shadow lists</a><span>, in §Unnumbered section</span>
   <li><a href="#silently-set-the-current-time">silently set the current time</a><span>, in §4.4.5</span>
   <li><a href="#simple-iteration-progress">simple iteration progress</a><span>, in §4.8.3.3</span>
   <li><a href="#start-delay">start delay</a><span>, in §4.5.3</span>
   <li><a href="#dom-animation-starttime">startTime</a><span>, in §6.4</span>
   <li><a href="#start-time">start time</a><span>, in §4.4</span>
   <li><a href="#dom-getanimationsoptions-subtree">subtree</a><span>, in §6.8</span>
   <li><a href="#dom-keyframeeffect-target">target</a><span>, in §6.6</span>
   <li><a href="#target-element">target element</a><span>, in §5.3</span>
   <li><a href="#target-property">target property</a><span>, in §5.1</span>
   <li><a href="#target-pseudo-selector">target pseudo-selector</a><span>, in §5.3</span>
   <li>
    timeline
    <ul>
     <li><a href="#dom-animation-timeline">attribute for Animation</a><span>, in §6.4</span>
     <li><a href="#dom-document-timeline">attribute for Document</a><span>, in §6.9</span>
     <li><a href="#timeline">definition of</a><span>, in §4.3</span>
    </ul>
   <li><a href="#timeline-associated-with-a-document">timeline associated with a document</a><span>, in §4.3</span>
   <li><a href="#timeline-current-time">timeline current time</a><span>, in §4.3</span>
   <li>
    timelineTime
    <ul>
     <li><a href="#dom-animationplaybackevent-timelinetime">attribute for AnimationPlaybackEvent</a><span>, in §6.12</span>
     <li><a href="#dom-animationplaybackeventinit-timelinetime">dict-member for AnimationPlaybackEventInit</a><span>, in §6.12</span>
    </ul>
   <li><a href="#timeline-time-to-origin-relative-time">timeline time to origin-relative time</a><span>, in §4.3</span>
   <li><a href="#time-value">time value</a><span>, in §4.2</span>
   <li><a href="#transformed-progress">transformed progress</a><span>, in §4.10.1</span>
   <li><a href="#underlying-value">underlying value</a><span>, in §5.4.3</span>
   <li><a href="#unresolved">unresolved</a><span>, in §4.2</span>
   <li><a href="#update-an-animations-finished-state">update an animation’s finished state</a><span>, in §4.4.13</span>
   <li><a href="#update-animations-and-send-events">update animations and send events</a><span>, in §4.3</span>
   <li><a href="#dom-animation-updateplaybackrate">updatePlaybackRate(playbackRate)</a><span>, in §6.4</span>
   <li><a href="#update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</a><span>, in §6.5.4</span>
   <li><a href="#dom-animationeffect-updatetiming">updateTiming()</a><span>, in §6.5</span>
   <li><a href="#dom-animationeffect-updatetiming">updateTiming(timing)</a><span>, in §6.5</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-fill-mode">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode">https://drafts.csswg.org/css-animations-1/#propdef-animation-fill-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-fill-mode">4.6. Fill behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-animation-name">
   <a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">https://drafts.csswg.org/css-animations-1/#propdef-animation-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-animation-name">5.4.1. Animation classes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-events">
   <a href="https://drafts.csswg.org/css-animations/#events">https://drafts.csswg.org/css-animations/#events</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-events">4.4.19. Animation events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-owning-element">
   <a href="https://drafts.csswg.org/css-animations-2/#owning-element">https://drafts.csswg.org/css-animations-2/#owning-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-owning-element">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-image">5.2. Animating properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-origin">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-origin">5.2. Animating properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-width">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-color">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-width">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-width">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-propdef-border-top①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-color">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-width">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-propdef-border-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-shadow">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow">https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-shadow">Animation of box-shadow</a> <a href="#ref-for-propdef-box-shadow①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">5.2. Animating properties</a>
    <li><a href="#ref-for-computed-value①">5.2.1. Custom Properties</a>
    <li><a href="#ref-for-computed-value②">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-transparent">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-transparent">https://drafts.csswg.org/css-color-4/#valdef-color-transparent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-transparent">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">6.4. The Animation interface</a> <a href="#ref-for-propdef-display①">(2)</a> <a href="#ref-for-propdef-display②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#typedef-easing-function">https://drafts.csswg.org/css-easing-1/#typedef-easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-easing-function">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-typedef-easing-function①">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-before-flag">
   <a href="https://drafts.csswg.org/css-easing-1/#before-flag">https://drafts.csswg.org/css-easing-1/#before-flag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-flag">4.10.1. Calculating the transformed progress</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-input-progress-value">
   <a href="https://drafts.csswg.org/css-easing-1/#input-progress-value">https://drafts.csswg.org/css-easing-1/#input-progress-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-input-progress-value">4.10.1. Calculating the transformed progress</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-linear-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#linear-easing-function">https://drafts.csswg.org/css-easing-1/#linear-easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-linear-easing-function">4.10. Time transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#easing-function">https://drafts.csswg.org/css-easing-1/#easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-easing-function">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-easing-function①">4.10. Time transformations</a> <a href="#ref-for-easing-function②">(2)</a> <a href="#ref-for-easing-function③">(3)</a>
    <li><a href="#ref-for-easing-function④">4.10.1. Calculating the transformed progress</a>
    <li><a href="#ref-for-easing-function⑤">5.3.1. Keyframes</a> <a href="#ref-for-easing-function⑥">(2)</a>
    <li><a href="#ref-for-easing-function⑦">5.3.3. The effect value of
  a keyframe effect</a>
    <li><a href="#ref-for-easing-function⑧">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-easing-function⑨">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-easing-function①⓪">6.6. The KeyframeEffect interface</a> <a href="#ref-for-easing-function①①">(2)</a> <a href="#ref-for-easing-function①②">(3)</a>
    <li><a href="#ref-for-easing-function①③">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-easing-function①④">(2)</a> <a href="#ref-for-easing-function①⑤">(3)</a> <a href="#ref-for-easing-function①⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-weight">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight">https://drafts.csswg.org/css-fonts-3/#propdef-font-weight</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-weight">Animation of font-weight</a> <a href="#ref-for-propdef-font-weight①">(2)</a> <a href="#ref-for-propdef-font-weight②">(3)</a> <a href="#ref-for-propdef-font-weight③">(4)</a> <a href="#ref-for-propdef-font-weight④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stacking-context">
   <a href="https://drafts.csswg.org/css-position-3/#stacking-context">https://drafts.csswg.org/css-position-3/#stacking-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stacking-context">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-css-registerproperty">
   <a href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty">https://drafts.css-houdini.org/css-properties-values-api-1/#dom-css-registerproperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-registerproperty">5.2.1. Custom Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-propertydescriptor-syntax">
   <a href="https://drafts.css-houdini.org/css-properties-values-api-1/#dom-propertydescriptor-syntax">https://drafts.css-houdini.org/css-properties-values-api-1/#dom-propertydescriptor-syntax</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-propertydescriptor-syntax">5.2.1. Custom Properties</a> <a href="#ref-for-dom-propertydescriptor-syntax①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-style-attribute">
   <a href="https://drafts.csswg.org/css-style-attr/#style-attribute">https://drafts.csswg.org/css-style-attr/#style-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-style-attribute">6.4. The Animation interface</a> <a href="#ref-for-style-attribute①">(2)</a> <a href="#ref-for-style-attribute②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-after-change-style">
   <a href="https://drafts.csswg.org/css-transitions-1/#after-change-style">https://drafts.csswg.org/css-transitions-1/#after-change-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-after-change-style">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-before-change-style">
   <a href="https://drafts.csswg.org/css-transitions-1/#before-change-style">https://drafts.csswg.org/css-transitions-1/#before-change-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-change-style">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-transition-events">
   <a href="https://drafts.csswg.org/css-transitions/#transition-events">https://drafts.csswg.org/css-transitions/#transition-events</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transition-events">4.4.19. Animation events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-style-change-event">
   <a href="https://drafts.csswg.org/css-transitions-1/#style-change-event">https://drafts.csswg.org/css-transitions-1/#style-change-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-style-change-event">6.4. The Animation interface</a>
    <li><a href="#ref-for-style-change-event①">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-style-change-event②">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
    <li><a href="#ref-for-style-change-event③">6.13. Model liveness</a> <a href="#ref-for-style-change-event④">(2)</a> <a href="#ref-for-style-change-event⑤">(3)</a> <a href="#ref-for-style-change-event⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-transitionend">
   <a href="https://drafts.csswg.org/css-transitions/#transitionend">https://drafts.csswg.org/css-transitions/#transitionend</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transitionend">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-owning-element">
   <a href="https://drafts.csswg.org/css-transitions-2/#owning-element">https://drafts.csswg.org/css-transitions-2/#owning-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-owning-element①">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">Animation of font-weight</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-interpolation">
   <a href="https://drafts.csswg.org/css-values-4/#interpolation">https://drafts.csswg.org/css-values-4/#interpolation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interpolation">5.2. Animating properties</a>
    <li><a href="#ref-for-interpolation①">5.3.3. The effect value of
  a keyframe effect</a>
    <li><a href="#ref-for-interpolation②">Animation of font-weight</a>
    <li><a href="#ref-for-interpolation③">Animation of visibility</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-interpolation">
   <a href="https://drafts.csswg.org/css-values-4/#interpolation">https://drafts.csswg.org/css-values-4/#interpolation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interpolation">5.2. Animating properties</a>
    <li><a href="#ref-for-interpolation①">5.3.3. The effect value of
  a keyframe effect</a>
    <li><a href="#ref-for-interpolation②">Animation of font-weight</a>
    <li><a href="#ref-for-interpolation③">Animation of visibility</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-not-additive">
   <a href="https://drafts.csswg.org/css-values-4/#not-additive">https://drafts.csswg.org/css-values-4/#not-additive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-not-additive">5.2. Animating properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-accumulation">
   <a href="https://drafts.csswg.org/css-values-4/#accumulation">https://drafts.csswg.org/css-values-4/#accumulation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-accumulation">5.4.4. Effect composition</a> <a href="#ref-for-accumulation①">(2)</a>
    <li><a href="#ref-for-accumulation②">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
    <li><a href="#ref-for-accumulation③">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-addition">
   <a href="https://drafts.csswg.org/css-values-4/#addition">https://drafts.csswg.org/css-values-4/#addition</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-addition">5.4.4. Effect composition</a> <a href="#ref-for-addition①">(2)</a>
    <li><a href="#ref-for-addition②">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
    <li><a href="#ref-for-addition③">Animation of font-weight</a>
    <li><a href="#ref-for-addition④">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-custom-property-name">
   <a href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name">https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-custom-property-name">6.6.2. Property names and IDL names</a> <a href="#ref-for-typedef-custom-property-name①">(2)</a>
    <li><a href="#ref-for-typedef-custom-property-name②">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">5.2.1. Custom Properties</a> <a href="#ref-for-custom-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-will-change">
   <a href="https://drafts.csswg.org/css-will-change-1/#propdef-will-change">https://drafts.csswg.org/css-will-change-1/#propdef-will-change</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-will-change">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-logical-to-physical">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical">https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-logical-to-physical">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">5.3.2. Calculating computed keyframes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">6.6.2. Property names and IDL names</a> <a href="#ref-for-propdef-float①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-visibility">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility">https://drafts.csswg.org/css2/visufx.html#propdef-visibility</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-visibility">Animation of visibility</a> <a href="#ref-for-propdef-visibility①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssomstring">
   <a href="https://drafts.csswg.org/cssom-1/#cssomstring">https://drafts.csswg.org/cssom-1/#cssomstring</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssomstring">6.6. The KeyframeEffect interface</a> <a href="#ref-for-cssomstring①">(2)</a>
    <li><a href="#ref-for-cssomstring②">6.6.4. The KeyframeEffectOptions dictionary</a> <a href="#ref-for-cssomstring③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-declaration-block">
   <a href="https://drafts.csswg.org/cssom-1/#css-declaration-block">https://drafts.csswg.org/cssom-1/#css-declaration-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-declaration-block">6.4. The Animation interface</a> <a href="#ref-for-css-declaration-block①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-property-to-idl-attribute">
   <a href="https://drafts.csswg.org/cssom/#css-property-to-idl-attribute">https://drafts.csswg.org/cssom/#css-property-to-idl-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-property-to-idl-attribute">5.3.2. Calculating computed keyframes</a>
    <li><a href="#ref-for-css-property-to-idl-attribute①">6.6.2. Property names and IDL names</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-attribute-to-css-property">
   <a href="https://drafts.csswg.org/cssom/#idl-attribute-to-css-property">https://drafts.csswg.org/cssom/#idl-attribute-to-css-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-attribute-to-css-property">6.6.2. Property names and IDL names</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssstyledeclaration-owner-node">
   <a href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node">https://drafts.csswg.org/cssom-1/#cssstyledeclaration-owner-node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssstyledeclaration-owner-node">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssstyledeclaration-readonly-flag">
   <a href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-readonly-flag">https://drafts.csswg.org/cssom-1/#cssstyledeclaration-readonly-flag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssstyledeclaration-readonly-flag">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serialize-a-css-value">
   <a href="https://drafts.csswg.org/cssom/#serialize-a-css-value">https://drafts.csswg.org/cssom/#serialize-a-css-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serialize-a-css-value">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-set-a-css-declaration">
   <a href="https://drafts.csswg.org/cssom-1/#set-a-css-declaration">https://drafts.csswg.org/cssom-1/#set-a-css-declaration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-a-css-declaration">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-style-attribute-for">
   <a href="https://drafts.csswg.org/cssom-1/#update-style-attribute-for">https://drafts.csswg.org/cssom-1/#update-style-attribute-for</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-style-attribute-for">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-documentorshadowroot">
   <a href="https://dom.spec.whatwg.org/#documentorshadowroot">https://dom.spec.whatwg.org/#documentorshadowroot</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-documentorshadowroot">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a> <a href="#ref-for-documentorshadowroot①">(2)</a>
    <li><a href="#ref-for-documentorshadowroot②">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">5.3. Keyframe effects</a> <a href="#ref-for-element①">(2)</a>
    <li><a href="#ref-for-element②">6.6. The KeyframeEffect interface</a> <a href="#ref-for-element③">(2)</a> <a href="#ref-for-element④">(3)</a> <a href="#ref-for-element⑤">(4)</a> <a href="#ref-for-element⑥">(5)</a> <a href="#ref-for-element⑦">(6)</a>
    <li><a href="#ref-for-element⑧">6.11. Extensions to the Element interface</a> <a href="#ref-for-element⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shadowroot">
   <a href="https://dom.spec.whatwg.org/#shadowroot">https://dom.spec.whatwg.org/#shadowroot</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shadowroot">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-child">
   <a href="https://dom.spec.whatwg.org/#concept-tree-child">https://dom.spec.whatwg.org/#concept-tree-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-child">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-connected">
   <a href="https://dom.spec.whatwg.org/#connected">https://dom.spec.whatwg.org/#connected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-connected">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-constructing-events">
   <a href="https://dom.spec.whatwg.org/#constructing-events">https://dom.spec.whatwg.org/#constructing-events</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-constructing-events">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-create">
   <a href="https://dom.spec.whatwg.org/#concept-event-create">https://dom.spec.whatwg.org/#concept-event-create</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-create">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-concept-event-create①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-concept-event-create②">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-tree-descendant">https://dom.spec.whatwg.org/#concept-tree-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-descendant">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-concept-tree-descendant①">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-concept-tree-descendant②">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-dispatch">
   <a href="https://dom.spec.whatwg.org/#concept-event-dispatch">https://dom.spec.whatwg.org/#concept-event-dispatch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-dispatch">4.3. Timelines</a>
    <li><a href="#ref-for-concept-event-dispatch①">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-concept-event-dispatch②">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-concept-event-dispatch③">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-element-attribute-has">
   <a href="https://dom.spec.whatwg.org/#concept-element-attribute-has">https://dom.spec.whatwg.org/#concept-element-attribute-has</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-element-attribute-has">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-inclusive-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant">https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-inclusive-descendant">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-document">
   <a href="https://dom.spec.whatwg.org/#concept-node-document">https://dom.spec.whatwg.org/#concept-node-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-document">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-root">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-root">https://dom.spec.whatwg.org/#concept-shadow-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-root">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-type">
   <a href="https://dom.spec.whatwg.org/#dom-event-type">https://dom.spec.whatwg.org/#dom-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-type">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-dom-event-type①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-dom-event-type②">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc">http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver">http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-completion-record-specification-type">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type">http://www.ecma-international.org/ecma-262/6.0/#sec-completion-record-specification-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-completion-record-specification-type">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-sec-completion-record-specification-type①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-enumerableownnames">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames">http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-enumerableownnames">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-getiterator">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator">http://www.ecma-international.org/ecma-262/6.0/#sec-getiterator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-getiterator">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-getmethod">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod">http://www.ecma-international.org/ecma-262/6.0/#sec-getmethod</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-getmethod">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-iteratorstep">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep">http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorstep</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-iteratorstep">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-iteratorvalue">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue">http://www.ecma-international.org/ecma-262/6.0/#sec-iteratorvalue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-iteratorvalue">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-promise-objects">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects">http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-promise-objects">4.4.8. The current ready promise</a> <a href="#ref-for-sec-promise-objects①">(2)</a> <a href="#ref-for-sec-promise-objects②">(3)</a>
    <li><a href="#ref-for-sec-promise-objects③">4.4.12. The current finished promise</a> <a href="#ref-for-sec-promise-objects④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-promise-objects">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects">http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-promise-objects">4.4.8. The current ready promise</a> <a href="#ref-for-sec-promise-objects①">(2)</a> <a href="#ref-for-sec-promise-objects②">(3)</a>
    <li><a href="#ref-for-sec-promise-objects③">4.4.12. The current finished promise</a> <a href="#ref-for-sec-promise-objects④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-ecmascript-data-types-and-values">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values">http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-data-types-and-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-ecmascript-data-types-and-values">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-well-known-symbols">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols">http://www.ecma-international.org/ecma-262/6.0/#sec-well-known-symbols</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-well-known-symbols">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time/#domhighrestimestamp">https://w3c.github.io/hr-time/#domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domhighrestimestamp">6.3. The DocumentTimeline interface</a> <a href="#ref-for-domhighrestimestamp①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-time-origin">
   <a href="https://w3c.github.io/hr-time/#time-origin">https://w3c.github.io/hr-time/#time-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-origin">4.3.1. Document timelines</a>
    <li><a href="#ref-for-time-origin①">4.3.2. The default document timeline</a>
    <li><a href="#ref-for-time-origin②">4.4.19. Animation events</a> <a href="#ref-for-time-origin③">(2)</a>
    <li><a href="#ref-for-time-origin④">6.3. The DocumentTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://html.spec.whatwg.org/#document">https://html.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">4.3. Timelines</a>
    <li><a href="#ref-for-document①">4.3.1. Document timelines</a>
    <li><a href="#ref-for-document②">4.3.2. The default document timeline</a>
    <li><a href="#ref-for-document③">4.4. Animations</a>
    <li><a href="#ref-for-document④">4.4.19. Animation events</a>
    <li><a href="#ref-for-document⑤">4.7.3. Iteration time space</a>
    <li><a href="#ref-for-document⑥">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-document⑦">6.3. The DocumentTimeline interface</a> <a href="#ref-for-document⑧">(2)</a>
    <li><a href="#ref-for-document⑨">6.4. The Animation interface</a> <a href="#ref-for-document①⓪">(2)</a>
    <li><a href="#ref-for-document①①">6.9. Extensions to the Document interface</a> <a href="#ref-for-document①②">(2)</a>
    <li><a href="#ref-for-document①③">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">6.4. The Animation interface</a> <a href="#ref-for-eventhandler①">(2)</a> <a href="#ref-for-eventhandler②">(3)</a> <a href="#ref-for-eventhandler③">(4)</a> <a href="#ref-for-eventhandler④">(5)</a> <a href="#ref-for-eventhandler⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-window①">6.4. The Animation interface</a> <a href="#ref-for-window②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-document">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#active-document">https://html.spec.whatwg.org/multipage/browsers.html#active-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-document">4.3.1. Document timelines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-an-entry-with-persisted-user-state">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state">https://html.spec.whatwg.org/multipage/browsers.html#an-entry-with-persisted-user-state</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-an-entry-with-persisted-user-state">8. Interaction with page display</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation-frames">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#animation-frames</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-frames">1.2. Relationship to other specifications</a> <a href="#ref-for-animation-frames①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-being-rendered">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered">https://html.spec.whatwg.org/multipage/browsers.html#being-rendered</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-being-rendered">6.4. The Animation interface</a> <a href="#ref-for-being-rendered①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">4.7.3. Iteration time space</a>
    <li><a href="#ref-for-current-global-object①">5.2.1. Custom Properties</a>
    <li><a href="#ref-for-current-global-object②">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-current-global-object③">6.4. The Animation interface</a> <a href="#ref-for-current-global-object④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-window">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-window">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-concept-document-window①">6.4. The Animation interface</a> <a href="#ref-for-concept-document-window②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-document-open">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open">https://html.spec.whatwg.org/multipage/webappapis.html#dom-document-open</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-open">4.3.2. The default document timeline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-manipulation-task-source">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source">https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-manipulation-task-source">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-dom-manipulation-task-source①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-dom-manipulation-task-source②">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop-processing-model">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop-processing-model">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element">https://html.spec.whatwg.org/multipage/embedded-content.html#media-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-element">4.4.11. Reaching the end</a>
    <li><a href="#ref-for-media-element①">8. Interaction with page display</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-perform-a-microtask-checkpoint">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint">https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-perform-a-microtask-checkpoint">4.3. Timelines</a>
    <li><a href="#ref-for-perform-a-microtask-checkpoint①">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-perform-a-microtask-checkpoint②">4.4.10. Pausing an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-microtask">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-microtask</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-microtask">4.4.13. Updating the finished state</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-queue-a-task①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-queue-a-task②">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-realm">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-concept-relevant-realm①">4.4.8. The current ready promise</a>
    <li><a href="#ref-for-concept-relevant-realm②">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-concept-relevant-realm③">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-concept-relevant-realm④">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-concept-relevant-realm⑤">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-concept-relevant-realm⑥">6.8. The Animatable interface mixin</a> <a href="#ref-for-concept-relevant-realm⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-run-the-animation-frame-callbacks">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html.html#run-the-animation-frame-callbacks</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-the-animation-frame-callbacks">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-session-history-entry">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry">https://html.spec.whatwg.org/multipage/browsers.html#session-history-entry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-session-history-entry">8. Interaction with page display</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-extend">
   <a href="https://infra.spec.whatwg.org/#list-extend">https://infra.spec.whatwg.org/#list-extend</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-extend">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-iterate">
   <a href="https://infra.spec.whatwg.org/#list-iterate">https://infra.spec.whatwg.org/#list-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-iterate">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-set">
   <a href="https://infra.spec.whatwg.org/#ordered-set">https://infra.spec.whatwg.org/#ordered-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-set">6.4. The Animation interface</a> <a href="#ref-for-ordered-set①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-offset">
   <a href="https://drafts.fxtf.org/motion-1/#propdef-offset">https://drafts.fxtf.org/motion-1/#propdef-offset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset">6.6.2. Property names and IDL names</a> <a href="#ref-for-propdef-offset①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-originating-element">
   <a href="https://drafts.csswg.org/selectors-4/#originating-element">https://drafts.csswg.org/selectors-4/#originating-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-originating-element">5.3. Keyframe effects</a>
    <li><a href="#ref-for-originating-element①">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-originating-element②">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-element">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-element">https://drafts.csswg.org/selectors-4/#pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-element">5.3. Keyframe effects</a> <a href="#ref-for-pseudo-element①">(2)</a> <a href="#ref-for-pseudo-element②">(3)</a> <a href="#ref-for-pseudo-element③">(4)</a>
    <li><a href="#ref-for-pseudo-element④">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-pseudo-element⑤">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-pseudo-element⑥">6.8. The Animatable interface mixin</a> <a href="#ref-for-pseudo-element⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mime-registration">
   <a href="https://svgwg.org/svg2-draft/mimereg.html#mime-registration">https://svgwg.org/svg2-draft/mimereg.html#mime-registration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mime-registration">7. Integration with Media Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-composite-operation">
   <a href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation">https://drafts.csswg.org/web-animations-2/#iteration-composite-operation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-composite-operation">4.7.2. Controlling iteration</a>
    <li><a href="#ref-for-iteration-composite-operation①">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-composite-operation-accumulate">
   <a href="https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate">https://drafts.csswg.org/web-animations-2/#iteration-composite-operation-accumulate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-composite-operation-accumulate">4.7.2. Controlling iteration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-idl-DOMException①">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-idl-DOMException②">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-idl-DOMException③">4.4.17. Reversing an animation</a>
    <li><a href="#ref-for-idl-DOMException④">6.4. The Animation interface</a> <a href="#ref-for-idl-DOMException⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">6.4. The Animation interface</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-idl-DOMString③">(2)</a> <a href="#ref-for-idl-DOMString④">(3)</a> <a href="#ref-for-idl-DOMString⑤">(4)</a> <a href="#ref-for-idl-DOMString⑥">(5)</a>
    <li><a href="#ref-for-idl-DOMString⑦">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-idl-DOMString⑧">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-idl-DOMString⑨">(2)</a> <a href="#ref-for-idl-DOMString①⓪">(3)</a>
    <li><a href="#ref-for-idl-DOMString①①">6.8. The Animatable interface mixin</a> <a href="#ref-for-idl-DOMString①②">(2)</a>
    <li><a href="#ref-for-idl-DOMString①③">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">6.2. The AnimationTimeline interface</a>
    <li><a href="#ref-for-Exposed①">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-Exposed②">6.4. The Animation interface</a>
    <li><a href="#ref-for-Exposed③">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-Exposed④">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-Exposed⑤">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-invalidstateerror①">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-invalidstateerror②">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-invalidstateerror③">4.4.17. Reversing an animation</a>
    <li><a href="#ref-for-invalidstateerror④">6.4. The Animation interface</a> <a href="#ref-for-invalidstateerror⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-nomodificationallowederror">
   <a href="https://heycam.github.io/webidl/#nomodificationallowederror">https://heycam.github.io/webidl/#nomodificationallowederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-nomodificationallowederror">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-EnforceRange">
   <a href="https://heycam.github.io/webidl/#EnforceRange">https://heycam.github.io/webidl/#EnforceRange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-EnforceRange">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-new-promise">
   <a href="https://heycam.github.io/webidl/#a-new-promise">https://heycam.github.io/webidl/#a-new-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-new-promise">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-a-new-promise①">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-a-new-promise②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-a-new-promise③">4.4.15. Canceling an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">6.4. The Animation interface</a> <a href="#ref-for-idl-boolean①">(2)</a>
    <li><a href="#ref-for-idl-boolean②">6.8. The Animatable interface mixin</a> <a href="#ref-for-idl-boolean③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-convert-ecmascript-to-idl-value">
   <a href="https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value">https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-convert-ecmascript-to-idl-value">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-promise-resolved-with">
   <a href="https://heycam.github.io/webidl/#a-promise-resolved-with">https://heycam.github.io/webidl/#a-promise-resolved-with</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-promise-resolved-with">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-a-promise-resolved-with①">4.4.8. The current ready promise</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-DOMString-to-es">
   <a href="https://heycam.github.io/webidl/#DOMString-to-es">https://heycam.github.io/webidl/#DOMString-to-es</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-DOMString-to-es">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">6.2. The AnimationTimeline interface</a> <a href="#ref-for-idl-double①">(2)</a>
    <li><a href="#ref-for-idl-double②">6.4. The Animation interface</a> <a href="#ref-for-idl-double③">(2)</a> <a href="#ref-for-idl-double④">(3)</a> <a href="#ref-for-idl-double⑤">(4)</a> <a href="#ref-for-idl-double⑥">(5)</a> <a href="#ref-for-idl-double⑦">(6)</a> <a href="#ref-for-idl-double⑧">(7)</a>
    <li><a href="#ref-for-idl-double⑨">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-idl-double①⓪">(2)</a> <a href="#ref-for-idl-double①①">(3)</a> <a href="#ref-for-idl-double①②">(4)</a> <a href="#ref-for-idl-double①③">(5)</a> <a href="#ref-for-idl-double①④">(6)</a> <a href="#ref-for-idl-double①⑤">(7)</a> <a href="#ref-for-idl-double①⑥">(8)</a> <a href="#ref-for-idl-double①⑦">(9)</a>
    <li><a href="#ref-for-idl-double①⑧">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-idl-double①⑨">(2)</a> <a href="#ref-for-idl-double②⓪">(3)</a> <a href="#ref-for-idl-double②①">(4)</a>
    <li><a href="#ref-for-idl-double②②">6.6. The KeyframeEffect interface</a> <a href="#ref-for-idl-double②③">(2)</a>
    <li><a href="#ref-for-idl-double②④">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-idl-double②⑤">(2)</a> <a href="#ref-for-idl-double②⑥">(3)</a>
    <li><a href="#ref-for-idl-double②⑦">6.12. The AnimationPlaybackEvent interface</a> <a href="#ref-for-idl-double②⑧">(2)</a> <a href="#ref-for-idl-double②⑨">(3)</a> <a href="#ref-for-idl-double③⓪">(4)</a> <a href="#ref-for-idl-double③①">(5)</a> <a href="#ref-for-idl-double③②">(6)</a> <a href="#ref-for-idl-double③③">(7)</a> <a href="#ref-for-idl-double③④">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-es-to-dictionary">
   <a href="https://heycam.github.io/webidl/#es-to-dictionary">https://heycam.github.io/webidl/#es-to-dictionary</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-es-to-dictionary">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-es-to-DOMString">
   <a href="https://heycam.github.io/webidl/#es-to-DOMString">https://heycam.github.io/webidl/#es-to-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-es-to-DOMString">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-nullable-type">
   <a href="https://heycam.github.io/webidl/#dfn-nullable-type">https://heycam.github.io/webidl/#dfn-nullable-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-nullable-type">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">6.6. The KeyframeEffect interface</a> <a href="#ref-for-idl-object①">(2)</a> <a href="#ref-for-idl-object②">(3)</a>
    <li><a href="#ref-for-idl-object③">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-present">
   <a href="https://heycam.github.io/webidl/#dfn-present">https://heycam.github.io/webidl/#dfn-present</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-present">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-dfn-present①">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dfn-present②">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dfn-present③">(2)</a> <a href="#ref-for-dfn-present④">(3)</a> <a href="#ref-for-dfn-present⑤">(4)</a> <a href="#ref-for-dfn-present⑥">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reject">
   <a href="https://heycam.github.io/webidl/#reject">https://heycam.github.io/webidl/#reject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reject">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-reject①">4.4.15. Canceling an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolve">
   <a href="https://heycam.github.io/webidl/#resolve">https://heycam.github.io/webidl/#resolve</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolve">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-resolve①">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-resolve②">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-resolve③">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-resolve④">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-resolve⑤">4.4.14. Finishing an animation</a> <a href="#ref-for-resolve⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-dfn-throw①">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-dfn-throw②">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-dfn-throw③">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-dfn-throw④">4.4.17. Reversing an animation</a>
    <li><a href="#ref-for-dfn-throw⑤">6.4. The Animation interface</a> <a href="#ref-for-dfn-throw⑥">(2)</a>
    <li><a href="#ref-for-dfn-throw⑦">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dfn-throw⑧">(2)</a> <a href="#ref-for-dfn-throw⑨">(3)</a> <a href="#ref-for-dfn-throw①⓪">(4)</a>
    <li><a href="#ref-for-dfn-throw①①">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-dfn-throw①②">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-dfn-throw①③">(2)</a> <a href="#ref-for-dfn-throw①④">(3)</a> <a href="#ref-for-dfn-throw①⑤">(4)</a> <a href="#ref-for-dfn-throw①⑥">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unrestricted-double">
   <a href="https://heycam.github.io/webidl/#idl-unrestricted-double">https://heycam.github.io/webidl/#idl-unrestricted-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unrestricted-double">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-idl-unrestricted-double①">(2)</a> <a href="#ref-for-idl-unrestricted-double②">(3)</a> <a href="#ref-for-idl-unrestricted-double③">(4)</a> <a href="#ref-for-idl-unrestricted-double④">(5)</a>
    <li><a href="#ref-for-idl-unrestricted-double⑤">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-idl-unrestricted-double⑥">(2)</a> <a href="#ref-for-idl-unrestricted-double⑦">(3)</a> <a href="#ref-for-idl-unrestricted-double⑧">(4)</a> <a href="#ref-for-idl-unrestricted-double⑨">(5)</a> <a href="#ref-for-idl-unrestricted-double①⓪">(6)</a>
    <li><a href="#ref-for-idl-unrestricted-double①①">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-idl-unrestricted-double①②">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-fill-mode" style="color:initial">animation-fill-mode</span>
     <li><span class="dfn-paneled" id="term-for-propdef-animation-name" style="color:initial">animation-name</span>
     <li><span class="dfn-paneled" id="term-for-events" style="color:initial">events from css animations</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-animations-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-owning-element" style="color:initial">owning element (animation)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background-image" style="color:initial">background-image</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-origin" style="color:initial">background-origin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-width" style="color:initial">border-bottom-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-color" style="color:initial">border-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-width" style="color:initial">border-left-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-width" style="color:initial">border-right-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top" style="color:initial">border-top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-color" style="color:initial">border-top-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-width" style="color:initial">border-top-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-shadow" style="color:initial">box-shadow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-color-transparent" style="color:initial">transparent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-EASING-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-easing-function" style="color:initial">&lt;easing-function></span>
     <li><span class="dfn-paneled" id="term-for-before-flag" style="color:initial">before flag</span>
     <li><span class="dfn-paneled" id="term-for-input-progress-value" style="color:initial">input progress value</span>
     <li><span class="dfn-paneled" id="term-for-linear-easing-function" style="color:initial">linear timing function</span>
     <li><span class="dfn-paneled" id="term-for-easing-function" style="color:initial">timing function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-weight" style="color:initial">font-weight</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-stacking-context" style="color:initial">stacking context</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-properties-values-api-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-css-registerproperty" style="color:initial">registerProperty(PropertyDescriptor descriptor)</span>
     <li><span class="dfn-paneled" id="term-for-dom-propertydescriptor-syntax" style="color:initial">syntax</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-STYLE-ATTR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-style-attribute" style="color:initial">style attribute</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TRANSITIONS-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-after-change-style" style="color:initial">after-change style</span>
     <li><span class="dfn-paneled" id="term-for-before-change-style" style="color:initial">before-change style</span>
     <li><span class="dfn-paneled" id="term-for-transition-events" style="color:initial">events from css transitions</span>
     <li><span class="dfn-paneled" id="term-for-style-change-event" style="color:initial">style change event</span>
     <li><span class="dfn-paneled" id="term-for-transitionend" style="color:initial">transitionend</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transitions-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-owning-element①" style="color:initial">owning element (transition)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-interpolation" style="color:initial">interpolate</span>
     <li><span class="dfn-paneled" id="term-for-interpolation①" style="color:initial">interpolation</span>
     <li><span class="dfn-paneled" id="term-for-not-additive" style="color:initial">not additive</span>
     <li><span class="dfn-paneled" id="term-for-accumulation" style="color:initial">value accumulation</span>
     <li><span class="dfn-paneled" id="term-for-addition" style="color:initial">value addition</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-custom-property-name" style="color:initial">&lt;custom-property-name></span>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-will-change-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-will-change" style="color:initial">will-change</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-logical-to-physical" style="color:initial">equivalent physical property</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-visibility" style="color:initial">visibility</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSSOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cssomstring" style="color:initial">CSSOMString</span>
     <li><span class="dfn-paneled" id="term-for-css-declaration-block" style="color:initial">css declaration block</span>
     <li><span class="dfn-paneled" id="term-for-css-property-to-idl-attribute" style="color:initial">css property to idl attribute</span>
     <li><span class="dfn-paneled" id="term-for-idl-attribute-to-css-property" style="color:initial">idl attribute to css property</span>
     <li><span class="dfn-paneled" id="term-for-cssstyledeclaration-owner-node" style="color:initial">owner node</span>
     <li><span class="dfn-paneled" id="term-for-cssstyledeclaration-readonly-flag" style="color:initial">readonly flag</span>
     <li><span class="dfn-paneled" id="term-for-serialize-a-css-value" style="color:initial">serialize a css value</span>
     <li><span class="dfn-paneled" id="term-for-set-a-css-declaration" style="color:initial">set a css declaration</span>
     <li><span class="dfn-paneled" id="term-for-update-style-attribute-for" style="color:initial">update style attribute for</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-documentorshadowroot" style="color:initial">DocumentOrShadowRoot</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-shadowroot" style="color:initial">ShadowRoot</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-child" style="color:initial">child</span>
     <li><span class="dfn-paneled" id="term-for-connected" style="color:initial">connected</span>
     <li><span class="dfn-paneled" id="term-for-constructing-events" style="color:initial">constructing events</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-create" style="color:initial">create an event</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-descendant" style="color:initial">descendant</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-dispatch" style="color:initial">dispatch</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
     <li><span class="dfn-paneled" id="term-for-concept-element-attribute-has" style="color:initial">has an attribute</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-inclusive-descendant" style="color:initial">inclusive descendant</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-document" style="color:initial">node document</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-root" style="color:initial">shadow root</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-ordinary-object-internal-methods-and-internal-slots-defineownproperty-p-desc" style="color:initial">[[defineownproperty]]</span>
     <li><span class="dfn-paneled" id="term-for-sec-ordinary-object-internal-methods-and-internal-slots-get-p-receiver" style="color:initial">[[get]]</span>
     <li><span class="dfn-paneled" id="term-for-sec-completion-record-specification-type" style="color:initial">completion record specification type</span>
     <li><span class="dfn-paneled" id="term-for-sec-enumerableownnames" style="color:initial">enumerableownnames</span>
     <li><span class="dfn-paneled" id="term-for-sec-getiterator" style="color:initial">getiterator</span>
     <li><span class="dfn-paneled" id="term-for-sec-getmethod" style="color:initial">getmethod</span>
     <li><span class="dfn-paneled" id="term-for-sec-iteratorstep" style="color:initial">iteratorstep</span>
     <li><span class="dfn-paneled" id="term-for-sec-iteratorvalue" style="color:initial">iteratorvalue</span>
     <li><span class="dfn-paneled" id="term-for-sec-promise-objects" style="color:initial">promise</span>
     <li><span class="dfn-paneled" id="term-for-sec-promise-objects①" style="color:initial">promise object</span>
     <li><span class="dfn-paneled" id="term-for-sec-ecmascript-data-types-and-values" style="color:initial">type</span>
     <li><span class="dfn-paneled" id="term-for-sec-well-known-symbols" style="color:initial">well known symbols</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
     <li><span class="dfn-paneled" id="term-for-time-origin" style="color:initial">time origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-active-document" style="color:initial">active document</span>
     <li><span class="dfn-paneled" id="term-for-an-entry-with-persisted-user-state" style="color:initial">an entry with persisted user state</span>
     <li><span class="dfn-paneled" id="term-for-animation-frames" style="color:initial">animation frame callbacks</span>
     <li><span class="dfn-paneled" id="term-for-being-rendered" style="color:initial">being rendered</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-window" style="color:initial">document associated with a window</span>
     <li><span class="dfn-paneled" id="term-for-dom-document-open" style="color:initial">document.open()</span>
     <li><span class="dfn-paneled" id="term-for-dom-manipulation-task-source" style="color:initial">dom manipulation task source</span>
     <li><span class="dfn-paneled" id="term-for-event-loop-processing-model" style="color:initial">event loop processing model</span>
     <li><span class="dfn-paneled" id="term-for-media-element" style="color:initial">media element</span>
     <li><span class="dfn-paneled" id="term-for-perform-a-microtask-checkpoint" style="color:initial">perform a microtask checkpoint</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-microtask" style="color:initial">queue a microtask</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-realm" style="color:initial">relevant realm</span>
     <li><span class="dfn-paneled" id="term-for-run-the-animation-frame-callbacks" style="color:initial">run the animation frame callbacks</span>
     <li><span class="dfn-paneled" id="term-for-session-history-entry" style="color:initial">session history entry</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-extend" style="color:initial">extend</span>
     <li><span class="dfn-paneled" id="term-for-list-iterate" style="color:initial">iterate</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-ordered-set" style="color:initial">ordered set</span>
    </ul>
   <li>
    <a data-link-type="biblio">[motion-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-offset" style="color:initial">offset</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-originating-element" style="color:initial">originating element</span>
     <li><span class="dfn-paneled" id="term-for-pseudo-element" style="color:initial">pseudo-element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mime-registration" style="color:initial">svg mime type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[web-animations-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-iteration-composite-operation" style="color:initial">iteration composite operation</span>
     <li><span class="dfn-paneled" id="term-for-iteration-composite-operation-accumulate" style="color:initial">iteration composite operation accumulate</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-nomodificationallowederror" style="color:initial">NoModificationAllowedError</span>
     <li><span class="dfn-paneled" id="term-for-EnforceRange" style="color:initial">[enforcerange]</span>
     <li><span class="dfn-paneled" id="term-for-a-new-promise" style="color:initial">a new promise</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-convert-ecmascript-to-idl-value" style="color:initial">convert ecmascript to idl value</span>
     <li><span class="dfn-paneled" id="term-for-a-promise-resolved-with" style="color:initial">create a new resolved promise</span>
     <li><span class="dfn-paneled" id="term-for-DOMString-to-es" style="color:initial">domstring to es</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-es-to-dictionary" style="color:initial">es to dictionary</span>
     <li><span class="dfn-paneled" id="term-for-es-to-DOMString" style="color:initial">es to domstring</span>
     <li><span class="dfn-paneled" id="term-for-dfn-nullable-type" style="color:initial">nullable</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-dfn-present" style="color:initial">present</span>
     <li><span class="dfn-paneled" id="term-for-reject" style="color:initial">reject a promise</span>
     <li><span class="dfn-paneled" id="term-for-resolve" style="color:initial">resolve a promise</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
     <li><span class="dfn-paneled" id="term-for-idl-unrestricted-double" style="color:initial">unrestricted double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-css-animations-2">[CSS-ANIMATIONS-2]
   <dd>CSS Animations Module Level 2 URL: <a href="https://drafts.csswg.org/css-animations-2/">https://drafts.csswg.org/css-animations-2/</a>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-cascade-3">[CSS-CASCADE-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-easing-1">[CSS-EASING-1]
   <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://www.w3.org/TR/css-easing-1/">CSS Easing Functions Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-logical-1">[CSS-LOGICAL-1]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-logical-1/">CSS Logical Properties and Values Level 1</a>. 27 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-logical-1/">https://www.w3.org/TR/css-logical-1/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-properties-values-api-1">[CSS-PROPERTIES-VALUES-API-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-properties-values-api-1/">CSS Properties and Values API Level 1</a>. 9 November 2017. WD. URL: <a href="https://www.w3.org/TR/css-properties-values-api-1/">https://www.w3.org/TR/css-properties-values-api-1/</a>
   <dt id="biblio-css-style-attr">[CSS-STYLE-ATTR]
   <dd>Tantek Çelik; Elika Etemad. <a href="https://www.w3.org/TR/css-style-attr/">CSS Style Attributes</a>. 7 November 2013. REC. URL: <a href="https://www.w3.org/TR/css-style-attr/">https://www.w3.org/TR/css-style-attr/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1]
   <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a>
   <dt id="biblio-css-transitions-2">[CSS-TRANSITIONS-2]
   <dd>CSS Transitions Module Level 2 URL: <a href="https://drafts.csswg.org/css-transitions-2/">https://drafts.csswg.org/css-transitions-2/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css-will-change-1">[CSS-WILL-CHANGE-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-will-change-1/">CSS Will Change Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-will-change-1/">https://www.w3.org/TR/css-will-change-1/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-hr-time-2">[HR-TIME-2]
   <dd>Ilya Grigorik; James Simonsen; Jatinder Mann. <a href="https://www.w3.org/TR/hr-time-2/">High Resolution Time Level 2</a>. 1 March 2018. CR. URL: <a href="https://www.w3.org/TR/hr-time-2/">https://www.w3.org/TR/hr-time-2/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-media-frags">[MEDIA-FRAGS]
   <dd>Raphaël Troncy; et al. <a href="https://www.w3.org/TR/media-frags/">Media Fragments URI 1.0 (basic)</a>. 25 September 2012. REC. URL: <a href="https://www.w3.org/TR/media-frags/">https://www.w3.org/TR/media-frags/</a>
   <dt id="biblio-motion-1">[MOTION-1]
   <dd>Dirk Schulze; et al. <a href="https://www.w3.org/TR/motion-1/">Motion Path Module Level 1</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/motion-1/">https://www.w3.org/TR/motion-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-select">[SELECT]
   <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-hr-time">[HR-TIME]
   <dd>Jatinder Mann. <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a>. 17 December 2012. REC. URL: <a href="https://www.w3.org/TR/hr-time/">https://www.w3.org/TR/hr-time/</a>
   <dt id="biblio-smil-animation">[SMIL-ANIMATION]
   <dd>Patrick Schmitz; Aaron Cohen. <a href="https://www.w3.org/TR/smil-animation/">SMIL Animation</a>. 4 September 2001. REC. URL: <a href="https://www.w3.org/TR/smil-animation/">https://www.w3.org/TR/smil-animation/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#animationtimeline"><code><c- g>AnimationTimeline</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⑥"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationtimeline-currenttime" id="ref-for-dom-animationtimeline-currenttime①"><c- g>currentTime</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-documenttimelineoptions"><code><c- g>DocumentTimelineOptions</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp②"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="DOMHighResTimeStamp " href="#dom-documenttimelineoptions-origintime" id="ref-for-dom-documenttimelineoptions-origintime②"><c- g>originTime</c-></a> = 0;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#documenttimeline"><code><c- g>DocumentTimeline</c-></code></a> : <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline①①"><c- n>AnimationTimeline</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-documenttimeline-documenttimeline" id="ref-for-dom-documenttimeline-documenttimeline①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-documenttimelineoptions" id="ref-for-dictdef-documenttimelineoptions①"><c- n>DocumentTimelineOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-documenttimeline-documenttimeline-options-options" id="ref-for-dom-documenttimeline-documenttimeline-options-options①"><c- g>options</c-></a> = {});
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#animation"><code><c- g>Animation</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-animation-animation" id="ref-for-dom-animation-animation②"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect⑦"><c- n>AnimationEffect</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-effect" id="ref-for-dom-animation-animation-effect-timeline-effect①"><c- g>effect</c-></a> = <c- b>null</c->,
                <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline②①"><c- n>AnimationTimeline</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animation-animation-effect-timeline-timeline" id="ref-for-dom-animation-animation-effect-timeline-timeline①"><c- g>timeline</c-></a>);
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①④"><c- b>DOMString</c-></a>                <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-animation-id" id="ref-for-dom-animation-id③"><c- g>id</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect①①"><c- n>AnimationEffect</c-></a>?         <a class="idl-code" data-link-type="attribute" data-type="AnimationEffect?" href="#dom-animation-effect" id="ref-for-dom-animation-effect①"><c- g>effect</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationtimeline" id="ref-for-animationtimeline③①"><c- n>AnimationTimeline</c-></a>?       <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationTimeline?" href="#dom-animation-timeline" id="ref-for-dom-animation-timeline①"><c- g>timeline</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①⓪"><c- b>double</c-></a>?                  <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-animation-starttime" id="ref-for-dom-animation-starttime①"><c- g>startTime</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⑤"><c- b>double</c-></a>?                  <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-animation-currenttime" id="ref-for-dom-animation-currenttime①"><c- g>currentTime</c-></a>;
             <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a>                   <a class="idl-code" data-link-type="attribute" data-type="double" href="#dom-animation-playbackrate" id="ref-for-dom-animation-playbackrate②"><c- g>playbackRate</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-animationplaystate" id="ref-for-enumdef-animationplaystate②"><c- n>AnimationPlayState</c-></a>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationPlayState" href="#dom-animation-playstate" id="ref-for-dom-animation-playstate①"><c- g>playState</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-animationreplacestate" id="ref-for-enumdef-animationreplacestate②"><c- n>AnimationReplaceState</c-></a>    <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationReplaceState" href="#dom-animation-replacestate" id="ref-for-dom-animation-replacestate②"><c- g>replaceState</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a>                  <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-animation-pending" id="ref-for-dom-animation-pending①"><c- g>pending</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation①⑨"><c- n>Animation</c-></a>>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-ready" id="ref-for-dom-animation-ready①"><c- g>ready</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation②①"><c- n>Animation</c-></a>>       <a class="idl-code" data-link-type="attribute" data-readonly data-type="Promise<Animation>" href="#dom-animation-finished" id="ref-for-dom-animation-finished①"><c- g>finished</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑥"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onfinish" id="ref-for-dom-animation-onfinish①"><c- g>onfinish</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-oncancel" id="ref-for-dom-animation-oncancel①"><c- g>oncancel</c-></a>;
             <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-animation-onremove" id="ref-for-dom-animation-onremove②"><c- g>onremove</c-></a>;
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-cancel" id="ref-for-dom-animation-cancel①"><c- g>cancel</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-finish" id="ref-for-dom-animation-finish①①"><c- g>finish</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-play" id="ref-for-dom-animation-play②"><c- g>play</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-pause" id="ref-for-dom-animation-pause①"><c- g>pause</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-updateplaybackrate" id="ref-for-dom-animation-updateplaybackrate②"><c- g>updatePlaybackRate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animation-updateplaybackrate-playbackrate-playbackrate" id="ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate②"><c- g>playbackRate</c-></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-reverse" id="ref-for-dom-animation-reverse①"><c- g>reverse</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-persist" id="ref-for-dom-animation-persist③"><c- g>persist</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animation-commitstyles" id="ref-for-dom-animation-commitstyles②"><c- g>commitStyles</c-></a>();
};

<c- b>enum</c-> <a href="#enumdef-animationplaystate"><code><c- g>AnimationPlayState</c-></code></a> { <a href="#dom-animationplaystate-idle"><code><c- s>"idle"</c-></code></a>, <a href="#dom-animationplaystate-running"><code><c- s>"running"</c-></code></a>, <a href="#dom-animationplaystate-paused"><code><c- s>"paused"</c-></code></a>, <a href="#dom-animationplaystate-finished"><code><c- s>"finished"</c-></code></a> };

<c- b>enum</c-> <a href="#enumdef-animationreplacestate"><code><c- g>AnimationReplaceState</c-></code></a> { <a href="#dom-animationreplacestate-active"><code><c- s>"active"</c-></code></a>, <a href="#dom-animationreplacestate-removed"><code><c- s>"removed"</c-></code></a>, <a href="#dom-animationreplacestate-persisted"><code><c- s>"persisted"</c-></code></a> };

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#animationeffect"><code><c- g>AnimationEffect</c-></code></a> {
    <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①⑤"><c- n>EffectTiming</c-></a>         <a class="idl-code" data-link-type="method" href="#dom-animationeffect-gettiming" id="ref-for-dom-animationeffect-gettiming⑥"><c- g>getTiming</c-></a>();
    <a class="n" data-link-type="idl-name" href="#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming③"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming⑦"><c- g>getComputedTiming</c-></a>();
    <c- b>void</c->                 <a class="idl-code" data-link-type="method" href="#dom-animationeffect-updatetiming" id="ref-for-dom-animationeffect-updatetiming②"><c- g>updateTiming</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-optionaleffecttiming" id="ref-for-dictdef-optionaleffecttiming④"><c- n>OptionalEffectTiming</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animationeffect-updatetiming-timing-timing" id="ref-for-dom-animationeffect-updatetiming-timing-timing③"><c- g>timing</c-></a> = {});
};

<c- b>dictionary</c-> <a href="#dictdef-effecttiming"><code><c- g>EffectTiming</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨①"><c- b>double</c-></a>                             <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-delay" id="ref-for-dom-effecttiming-delay②"><c- g>delay</c-></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪①"><c- b>double</c-></a>                             <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-enddelay" id="ref-for-dom-effecttiming-enddelay②"><c- g>endDelay</c-></a> = 0;
    <a class="n" data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode②①"><c- n>FillMode</c-></a>                           <a class="idl-code" data-default="&quot;auto&quot;" data-link-type="dict-member" data-type="FillMode                           " href="#dom-effecttiming-fill" id="ref-for-dom-effecttiming-fill②①"><c- g>fill</c-></a> = "auto";
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①①"><c- b>double</c-></a>                             <a class="idl-code" data-default="0.0" data-link-type="dict-member" data-type="double                             " href="#dom-effecttiming-iterationstart" id="ref-for-dom-effecttiming-iterationstart⑥"><c- g>iterationStart</c-></a> = 0.0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③"><c- b>unrestricted</c-> <c- b>double</c-></a>                <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="unrestricted double                " href="#dom-effecttiming-iterations" id="ref-for-dom-effecttiming-iterations⑤"><c- g>iterations</c-></a> = 1.0;
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a>) <a class="idl-code" data-default="&quot;auto&quot;" data-link-type="dict-member" data-type="(unrestricted double or DOMString) " href="#dom-effecttiming-duration" id="ref-for-dom-effecttiming-duration②①"><c- g>duration</c-></a> = "auto";
    <a class="n" data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection③"><c- n>PlaybackDirection</c-></a>                  <a class="idl-code" data-default="&quot;normal&quot;" data-link-type="dict-member" data-type="PlaybackDirection                  " href="#dom-effecttiming-direction" id="ref-for-dom-effecttiming-direction②"><c- g>direction</c-></a> = "normal";
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a>                          <a class="idl-code" data-default="&quot;linear&quot;" data-link-type="dict-member" data-type="DOMString                          " href="#dom-effecttiming-easing" id="ref-for-dom-effecttiming-easing⑥"><c- g>easing</c-></a> = "linear";
};

<c- b>dictionary</c-> <a href="#dictdef-optionaleffecttiming"><code><c- g>OptionalEffectTiming</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②①"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-delay" id="ref-for-dom-optionaleffecttiming-delay①"><c- g>delay</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③①"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-enddelay" id="ref-for-dom-optionaleffecttiming-enddelay①"><c- g>endDelay</c-></a>;
    <a class="n" data-link-type="idl-name" href="#enumdef-fillmode" id="ref-for-enumdef-fillmode③①"><c- n>FillMode</c-></a>                           <a class="idl-code" data-link-type="dict-member" data-type="FillMode                           " href="#dom-optionaleffecttiming-fill" id="ref-for-dom-optionaleffecttiming-fill①"><c- g>fill</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④①"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="dict-member" data-type="double                             " href="#dom-optionaleffecttiming-iterationstart" id="ref-for-dom-optionaleffecttiming-iterationstart①"><c- g>iterationStart</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②①"><c- b>unrestricted</c-> <c- b>double</c-></a>                <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double                " href="#dom-optionaleffecttiming-iterations" id="ref-for-dom-optionaleffecttiming-iterations①"><c- g>iterations</c-></a>;
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a>) <a class="idl-code" data-link-type="dict-member" data-type="(unrestricted double or DOMString) " href="#dom-optionaleffecttiming-duration" id="ref-for-dom-optionaleffecttiming-duration①"><c- g>duration</c-></a>;
    <a class="n" data-link-type="idl-name" href="#enumdef-playbackdirection" id="ref-for-enumdef-playbackdirection①①"><c- n>PlaybackDirection</c-></a>                  <a class="idl-code" data-link-type="dict-member" data-type="PlaybackDirection                  " href="#dom-optionaleffecttiming-direction" id="ref-for-dom-optionaleffecttiming-direction①"><c- g>direction</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤①"><c- b>DOMString</c-></a>                          <a class="idl-code" data-link-type="dict-member" data-type="DOMString                          " href="#dom-optionaleffecttiming-easing" id="ref-for-dom-optionaleffecttiming-easing①"><c- g>easing</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-fillmode"><code><c- g>FillMode</c-></code></a> { <a href="#dom-fillmode-none"><code><c- s>"none"</c-></code></a>, <a href="#dom-fillmode-forwards"><code><c- s>"forwards"</c-></code></a>, <a href="#dom-fillmode-backwards"><code><c- s>"backwards"</c-></code></a>, <a href="#dom-fillmode-both"><code><c- s>"both"</c-></code></a>, <a href="#dom-fillmode-auto"><code><c- s>"auto"</c-></code></a> };

<c- b>enum</c-> <a href="#enumdef-playbackdirection"><code><c- g>PlaybackDirection</c-></code></a> { <a href="#dom-playbackdirection-normal"><code><c- s>"normal"</c-></code></a>, <a href="#dom-playbackdirection-reverse"><code><c- s>"reverse"</c-></code></a>, <a href="#dom-playbackdirection-alternate"><code><c- s>"alternate"</c-></code></a>, <a href="#dom-playbackdirection-alternate-reverse"><code><c- s>"alternate-reverse"</c-></code></a> };

<c- b>dictionary</c-> <a href="#dictdef-computedeffecttiming"><code><c- g>ComputedEffectTiming</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming⑧①"><c- n>EffectTiming</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a>  <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double  " href="#dom-computedeffecttiming-endtime" id="ref-for-dom-computedeffecttiming-endtime①"><c- g>endTime</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a>  <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double  " href="#dom-computedeffecttiming-activeduration" id="ref-for-dom-computedeffecttiming-activeduration①"><c- g>activeDuration</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧①"><c- b>double</c-></a>?              <a class="idl-code" data-link-type="dict-member" data-type="double?              " href="#dom-computedeffecttiming-localtime" id="ref-for-dom-computedeffecttiming-localtime①"><c- g>localTime</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨①"><c- b>double</c-></a>?              <a class="idl-code" data-link-type="dict-member" data-type="double?              " href="#dom-computedeffecttiming-progress" id="ref-for-dom-computedeffecttiming-progress①"><c- g>progress</c-></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="unrestricted double? " href="#dom-computedeffecttiming-currentiteration" id="ref-for-dom-computedeffecttiming-currentiteration①"><c- g>currentIteration</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#keyframeeffect"><code><c- g>KeyframeEffect</c-></code></a> : <a class="n" data-link-type="idl-name" href="#animationeffect" id="ref-for-animationeffect⑥①"><c- n>AnimationEffect</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect" id="ref-for-dom-keyframeeffect-keyframeeffect⑧"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②①"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-target①"><c- g>target</c-></a>,
                <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object④"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes①"><c- g>keyframes</c-></a>,
                <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑦"><c- n>KeyframeEffectOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options" id="ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-options①"><c- g>options</c-></a> = {});
    <a class="idl-code" data-link-type="constructor" href="#dom-keyframeeffect-keyframeeffect-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source①"><c- g>constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#keyframeeffect" id="ref-for-keyframeeffect①⑥"><c- n>KeyframeEffect</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source①"><c- g>source</c-></a>);
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③①"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="Element?" href="#dom-keyframeeffect-target" id="ref-for-dom-keyframeeffect-target①"><c- g>target</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring④"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="CSSOMString?" href="#dom-keyframeeffect-pseudoelement" id="ref-for-dom-keyframeeffect-pseudoelement①"><c- g>pseudoElement</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation⑤"><c- n>CompositeOperation</c-></a>             <a class="idl-code" data-link-type="attribute" data-type="CompositeOperation" href="#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite②"><c- g>composite</c-></a>;
    <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①①"><c- b>object</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-getkeyframes" id="ref-for-dom-keyframeeffect-getkeyframes②"><c- g>getKeyframes</c-></a>();
    <c- b>void</c->             <a class="idl-code" data-link-type="method" href="#dom-keyframeeffect-setkeyframes" id="ref-for-dom-keyframeeffect-setkeyframes③"><c- g>setKeyframes</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②①"><c- b>object</c-></a>? <a href="#dom-keyframeeffect-setkeyframes-keyframes-keyframes"><code><c- g>keyframes</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-basecomputedkeyframe"><code><c- g>BaseComputedKeyframe</c-></code></a> {
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②②①"><c- b>double</c-></a>?                  <a data-default="null" data-type="double?                  " href="#dom-basecomputedkeyframe-offset"><code><c- g>offset</c-></code></a> = <c- b>null</c->;
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②③①"><c- b>double</c-></a>                   <a data-type="double                   " href="#dom-basecomputedkeyframe-computedoffset"><code><c- g>computedOffset</c-></code></a>;
     <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a>                <a data-default="&quot;linear&quot;" data-type="DOMString                " href="#dom-basecomputedkeyframe-easing"><code><c- g>easing</c-></code></a> = "linear";
     <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto⑥"><c- n>CompositeOperationOrAuto</c-></a> <a data-default="&quot;auto&quot;" data-type="CompositeOperationOrAuto " href="#dom-basecomputedkeyframe-composite"><code><c- g>composite</c-></code></a> = "auto";
};

<c- b>dictionary</c-> <a href="#dictdef-basepropertyindexedkeyframe"><code><c- g>BasePropertyIndexedKeyframe</c-></code></a> {
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②④①"><c- b>double</c-></a>? <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑤①"><c- b>double</c-></a>?>)                         <a data-default="[]" data-type="(double? or sequence<double?>)                         " href="#dom-basepropertyindexedkeyframe-offset"><code><c- g>offset</c-></code></a> = [];
    (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧①"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨①"><c- b>DOMString</c-></a>>)                     <a data-default="[]" data-type="(DOMString or sequence<DOMString>)                     " href="#dom-basepropertyindexedkeyframe-easing"><code><c- g>easing</c-></code></a> = [];
    (<a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto①①"><c- n>CompositeOperationOrAuto</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto②①"><c- n>CompositeOperationOrAuto</c-></a>>) <a data-default="[]" data-type="(CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) " href="#dom-basepropertyindexedkeyframe-composite"><code><c- g>composite</c-></code></a> = [];
};

<c- b>dictionary</c-> <a href="#dictdef-basekeyframe"><code><c- g>BaseKeyframe</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑥①"><c- b>double</c-></a>?                  <a data-default="null" data-type="double?                  " href="#dom-basekeyframe-offset"><code><c- g>offset</c-></code></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪①"><c- b>DOMString</c-></a>                <a data-default="&quot;linear&quot;" data-type="DOMString                " href="#dom-basekeyframe-easing"><code><c- g>easing</c-></code></a> = "linear";
    <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperationorauto" id="ref-for-enumdef-compositeoperationorauto③①"><c- n>CompositeOperationOrAuto</c-></a> <a data-default="&quot;auto&quot;" data-type="CompositeOperationOrAuto " href="#dom-basekeyframe-composite"><code><c- g>composite</c-></code></a> = "auto";
};

<c- b>dictionary</c-> <a href="#dictdef-keyframeeffectoptions"><code><c- g>KeyframeEffectOptions</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①④①"><c- n>EffectTiming</c-></a> {
    <a class="n" data-link-type="idl-name" href="#enumdef-compositeoperation" id="ref-for-enumdef-compositeoperation②①"><c- n>CompositeOperation</c-></a> <a class="idl-code" data-default="&quot;replace&quot;" data-link-type="dict-member" data-type="CompositeOperation " href="#dom-keyframeeffectoptions-composite" id="ref-for-dom-keyframeeffectoptions-composite①"><c- g>composite</c-></a> = "replace";
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②①"><c- n>CSSOMString</c-></a>?       <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="CSSOMString?       " href="#dom-keyframeeffectoptions-pseudoelement" id="ref-for-dom-keyframeeffectoptions-pseudoelement①"><c- g>pseudoElement</c-></a> = <c- b>null</c->;
};

<c- b>enum</c-> <a href="#enumdef-compositeoperation"><code><c- g>CompositeOperation</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace②"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add②"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate②"><c- s>"accumulate"</c-></a> };

<c- b>enum</c-> <a href="#enumdef-compositeoperationorauto"><code><c- g>CompositeOperationOrAuto</c-></code></a> { <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-replace" id="ref-for-dom-compositeoperation-replace①①"><c- s>"replace"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-add" id="ref-for-dom-compositeoperation-add①①"><c- s>"add"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperation-accumulate" id="ref-for-dom-compositeoperation-accumulate①①"><c- s>"accumulate"</c-></a>, <a class="idl-code" data-link-type="enum-value" href="#dom-compositeoperationorauto-auto" id="ref-for-dom-compositeoperationorauto-auto⑤①"><c- s>"auto"</c-></a> };

<c- b>interface</c-> <c- b>mixin</c-> <a href="#animatable"><code><c- g>Animatable</c-></code></a> {
    <a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation⑧①"><c- n>Animation</c-></a>           <a class="idl-code" data-link-type="method" href="#dom-animatable-animate" id="ref-for-dom-animatable-animate②①"><c- g>animate</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object③①"><c- b>object</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-keyframes" id="ref-for-dom-animatable-animate-keyframes-options-keyframes①"><c- g>keyframes</c-></a>,
                                <c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#dictdef-keyframeanimationoptions" id="ref-for-dictdef-keyframeanimationoptions①①"><c- n>KeyframeAnimationOptions</c-></a>) <a class="idl-code" data-link-type="argument" href="#dom-animatable-animate-keyframes-options-options" id="ref-for-dom-animatable-animate-keyframes-options-options①"><c- g>options</c-></a> = {});
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation⑨①"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-animatable-getanimations" id="ref-for-dom-animatable-getanimations④"><c- g>getAnimations</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-getanimationsoptions" id="ref-for-dictdef-getanimationsoptions①"><c- n>GetAnimationsOptions</c-></a> <a class="idl-code" data-link-type="argument" href="#dom-animatable-getanimations-options-options" id="ref-for-dom-animatable-getanimations-options-options③"><c- g>options</c-></a> = {});
};

<c- b>dictionary</c-> <a href="#dictdef-keyframeanimationoptions"><code><c- g>KeyframeAnimationOptions</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions⑥①"><c- n>KeyframeEffectOptions</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-keyframeanimationoptions-id" id="ref-for-dom-keyframeanimationoptions-id①"><c- g>id</c-></a> = "";
};

<c- b>dictionary</c-> <a href="#dictdef-getanimationsoptions"><code><c- g>GetAnimationsOptions</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a class="idl-code" data-default="false" data-link-type="dict-member" data-type="boolean " href="#dom-getanimationsoptions-subtree" id="ref-for-dom-getanimationsoptions-subtree②"><c- g>subtree</c-></a> = <c- b>false</c->;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#document" id="ref-for-document①②①"><c- g>Document</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#documenttimeline" id="ref-for-documenttimeline②①"><c- n>DocumentTimeline</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DocumentTimeline" href="#dom-document-timeline" id="ref-for-dom-document-timeline①"><c- g>timeline</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#documentorshadowroot" id="ref-for-documentorshadowroot①①"><c- g>DocumentOrShadowRoot</c-></a> {
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#animation" id="ref-for-animation①③①"><c- n>Animation</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-documentorshadowroot-getanimations" id="ref-for-dom-documentorshadowroot-getanimations②"><c- g>getAnimations</c-></a>();
};

<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨①"><c- n>Element</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="#animatable" id="ref-for-animatable③①"><c- n>Animatable</c-></a>;

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#animationplaybackevent"><code><c- g>AnimationPlaybackEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-animationplaybackevent-animationplaybackevent" id="ref-for-dom-animationplaybackevent-animationplaybackevent①"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③①"><c- b>DOMString</c-></a> <a href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-animationplaybackeventinit" id="ref-for-dictdef-animationplaybackeventinit①"><c- n>AnimationPlaybackEventInit</c-></a> <a href="#dom-animationplaybackevent-animationplaybackevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {});
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑦①"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationplaybackevent-currenttime" id="ref-for-dom-animationplaybackevent-currenttime③①"><c- g>currentTime</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑧①"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="double?" href="#dom-animationplaybackevent-timelinetime" id="ref-for-dom-animationplaybackevent-timelinetime④①"><c- g>timelineTime</c-></a>;
};
<c- b>dictionary</c-> <a href="#dictdef-animationplaybackeventinit"><code><c- g>AnimationPlaybackEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑨①"><c- b>double</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="double? " href="#dom-animationplaybackeventinit-currenttime" id="ref-for-dom-animationplaybackeventinit-currenttime①"><c- g>currentTime</c-></a> = <c- b>null</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⓪①"><c- b>double</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="double? " href="#dom-animationplaybackeventinit-timelinetime" id="ref-for-dom-animationplaybackeventinit-timelinetime①"><c- g>timelineTime</c-></a> = <c- b>null</c->;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> There must be a better term than “origin time”—
             it’s too similar to “time origin”. <a href="https://github.com/w3c/csswg-drafts/issues/2079">&lt;https://github.com/w3c/csswg-drafts/issues/2079></a><a href="#issue-3513726c"> ↵ </a></div>
   <div class="issue"> With the set of timelines defined in this level of this
             specification, this situation is not expected to occur. As
             a result, this section will likely be moved to a subsequent level
             of this specification. <a href="https://github.com/w3c/csswg-drafts/issues/2080">&lt;https://github.com/w3c/csswg-drafts/issues/2080></a><a href="#issue-4490c13e"> ↵ </a></div>
   <div class="issue">
     In the presence of certain timing functions, the input iteration
    progress to an animation effect is not limited to the range [0, 1].
    Currently, however, keyframe offsets <em>are</em> limited to the
    range [0, 1] and property values are simply extrapolated for input
    iteration progress values outside this range. 
    <p>We have considered removing this restriction since some cases exist
    where it is useful to be able to specify non-linear
    changes in property values at iteration progress values outside the
    range [0, 1].
    One example is an animation that interpolates from green to yellow
    but has an overshoot timing function that makes it temporarily
    interpolate ‘beyond’ yellow to red before settling back
    to yellow.</p>
    <p>While this effect could be achieved by modification of the keyframes
    and timing function, this approach seems to break the model’s
    separation of timing concerns from animation effects.</p>
    <p>It is not clear how this effect should be achieved but we note that
    allowing keyframe offsets outside [0, 1] may make the currently
    specified behavior where keyframes at offset 0 and 1 are synthesized
    as necessary, inconsistent.</p>
    <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section
    4 (Keyframe offsets outside [0, 1]) of minuted discussion from Tokyo
      2013 F2F</a>.</p>
    <p><a href="https://github.com/w3c/csswg-drafts/issues/2081">&lt;https://github.com/w3c/csswg-drafts/issues/2081></a></p>
     <a href="#issue-11fd5835"> ↵ </a>
   </div>
   <div class="issue">
    <p>The definition of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#being-rendered">being rendered</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a> with regards to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display">display: contents</a> is still <a href="https://github.com/whatwg/html/issues/1837">under discussion</a>.
  For the purpose of this procedure, we assume that an
  element with <span class="css">display: contents</span> that otherwise would have
  associated layout boxes (i.e. it is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected">connected</a> and not part of
  a <span class="css">display: none</span> subtree) <em>is</em> being rendered.</p>
     <a href="#issue-8f3b970c"> ↵ </a>
   </div>
   <div class="issue"> The <code>remove()</code> method can be used to remove an effect
from either its parent group or animation. Should we keep it in level 1 and
define it simply as removing the animation effect from its animation? <a href="https://github.com/w3c/csswg-drafts/issues/2082">&lt;https://github.com/w3c/csswg-drafts/issues/2082></a><a href="#issue-178c6cfa"> ↵ </a></div>
   <div class="issue"> What should we do if the [[type]] is <span class="esvalue">break</span>, <span class="esvalue">continue</span>, or <span class="esvalue">return</span>? Can it be?<a href="#issue-47a68024"> ↵ </a></div>
   <div class="issue"> Is this at odds with those <a data-link-type="dfn" href="#time-value">time values</a> being relative to <code>navigationStart</code> and with <code>requestAnimationFrame</code> using the same time as <code>document.timeline.currentTime</code>? <a href="https://github.com/w3c/csswg-drafts/issues/2083">&lt;https://github.com/w3c/csswg-drafts/issues/2083></a><a href="#issue-a128cfff"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="time-value">
   <b><a href="#time-value">#time-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-value">4.2. Time values</a> <a href="#ref-for-time-value①">(2)</a> <a href="#ref-for-time-value②">(3)</a> <a href="#ref-for-time-value③">(4)</a>
    <li><a href="#ref-for-time-value④">4.3. Timelines</a> <a href="#ref-for-time-value⑤">(2)</a> <a href="#ref-for-time-value⑥">(3)</a> <a href="#ref-for-time-value⑦">(4)</a> <a href="#ref-for-time-value⑧">(5)</a> <a href="#ref-for-time-value⑨">(6)</a>
    <li><a href="#ref-for-time-value①⓪">4.3.1. Document timelines</a>
    <li><a href="#ref-for-time-value①①">4.3.2. The default document timeline</a> <a href="#ref-for-time-value①②">(2)</a>
    <li><a href="#ref-for-time-value①③">4.4. Animations</a> <a href="#ref-for-time-value①④">(2)</a> <a href="#ref-for-time-value①⑤">(3)</a>
    <li><a href="#ref-for-time-value①⑥">4.4.4. The current time of an animation</a> <a href="#ref-for-time-value①⑦">(2)</a>
    <li><a href="#ref-for-time-value①⑧">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-time-value①⑨">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-time-value②⓪">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-time-value②①">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-time-value②②">4.4.13. Updating the finished state</a> <a href="#ref-for-time-value②③">(2)</a>
    <li><a href="#ref-for-time-value②④">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-time-value②⑤">4.4.15. Canceling an animation</a> <a href="#ref-for-time-value②⑥">(2)</a>
    <li><a href="#ref-for-time-value②⑦">4.4.16. Speed control</a> <a href="#ref-for-time-value②⑧">(2)</a>
    <li><a href="#ref-for-time-value②⑨">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-time-value③⓪">4.4.19. Animation events</a>
    <li><a href="#ref-for-time-value③①">4.4.19.1. Sorting animation events</a> <a href="#ref-for-time-value③②">(2)</a> <a href="#ref-for-time-value③③">(3)</a> <a href="#ref-for-time-value③④">(4)</a> <a href="#ref-for-time-value③⑤">(5)</a> <a href="#ref-for-time-value③⑥">(6)</a> <a href="#ref-for-time-value③⑦">(7)</a>
    <li><a href="#ref-for-time-value③⑧">4.7.3. Iteration time space</a>
    <li><a href="#ref-for-time-value③⑨">4.8.3.1. Calculating the active time</a> <a href="#ref-for-time-value④⓪">(2)</a> <a href="#ref-for-time-value④①">(3)</a>
    <li><a href="#ref-for-time-value④②">6.1. Time values in the programming interface</a>
    <li><a href="#ref-for-time-value④③">6.12. The AnimationPlaybackEvent interface</a>
    <li><a href="#ref-for-time-value④④">8. Interaction with page display</a> <a href="#ref-for-time-value④⑤">(2)</a>
    <li><a href="#ref-for-time-value④⑥">9.1. Precision of time values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unresolved">
   <b><a href="#unresolved">#unresolved</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unresolved">2. Specification conventions</a>
    <li><a href="#ref-for-unresolved①">4.3. Timelines</a> <a href="#ref-for-unresolved②">(2)</a> <a href="#ref-for-unresolved③">(3)</a> <a href="#ref-for-unresolved④">(4)</a>
    <li><a href="#ref-for-unresolved⑤">4.3.1. Document timelines</a>
    <li><a href="#ref-for-unresolved⑥">4.4. Animations</a> <a href="#ref-for-unresolved⑦">(2)</a>
    <li><a href="#ref-for-unresolved⑧">4.4.1. Setting the timeline of an animation</a> <a href="#ref-for-unresolved⑨">(2)</a>
    <li><a href="#ref-for-unresolved①⓪">4.4.2. Responding to a newly inactive
  timeline</a>
    <li><a href="#ref-for-unresolved①①">4.4.4. The current time of an animation</a> <a href="#ref-for-unresolved①②">(2)</a> <a href="#ref-for-unresolved①③">(3)</a>
    <li><a href="#ref-for-unresolved①④">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-unresolved①⑤">(2)</a> <a href="#ref-for-unresolved①⑥">(3)</a> <a href="#ref-for-unresolved①⑦">(4)</a> <a href="#ref-for-unresolved①⑧">(5)</a> <a href="#ref-for-unresolved①⑨">(6)</a> <a href="#ref-for-unresolved②⓪">(7)</a>
    <li><a href="#ref-for-unresolved②①">4.4.6. Setting the start time of an animation</a> <a href="#ref-for-unresolved②②">(2)</a> <a href="#ref-for-unresolved②③">(3)</a> <a href="#ref-for-unresolved②④">(4)</a> <a href="#ref-for-unresolved②⑤">(5)</a> <a href="#ref-for-unresolved②⑥">(6)</a> <a href="#ref-for-unresolved②⑦">(7)</a> <a href="#ref-for-unresolved②⑧">(8)</a> <a href="#ref-for-unresolved②⑨">(9)</a>
    <li><a href="#ref-for-unresolved③⓪">4.4.7. Waiting for the associated effect</a> <a href="#ref-for-unresolved③①">(2)</a>
    <li><a href="#ref-for-unresolved③②">4.4.9. Playing an animation</a> <a href="#ref-for-unresolved③③">(2)</a> <a href="#ref-for-unresolved③④">(3)</a> <a href="#ref-for-unresolved③⑤">(4)</a> <a href="#ref-for-unresolved③⑥">(5)</a> <a href="#ref-for-unresolved③⑦">(6)</a> <a href="#ref-for-unresolved③⑧">(7)</a> <a href="#ref-for-unresolved③⑨">(8)</a> <a href="#ref-for-unresolved④⓪">(9)</a>
    <li><a href="#ref-for-unresolved④①">4.4.10. Pausing an animation</a> <a href="#ref-for-unresolved④②">(2)</a> <a href="#ref-for-unresolved④③">(3)</a>
    <li><a href="#ref-for-unresolved④④">4.4.13. Updating the finished state</a> <a href="#ref-for-unresolved④⑤">(2)</a> <a href="#ref-for-unresolved④⑥">(3)</a> <a href="#ref-for-unresolved④⑦">(4)</a> <a href="#ref-for-unresolved④⑧">(5)</a> <a href="#ref-for-unresolved④⑨">(6)</a> <a href="#ref-for-unresolved⑤⓪">(7)</a> <a href="#ref-for-unresolved⑤①">(8)</a> <a href="#ref-for-unresolved⑤②">(9)</a>
    <li><a href="#ref-for-unresolved⑤③">4.4.14. Finishing an animation</a> <a href="#ref-for-unresolved⑤④">(2)</a> <a href="#ref-for-unresolved⑤⑤">(3)</a> <a href="#ref-for-unresolved⑤⑥">(4)</a>
    <li><a href="#ref-for-unresolved⑤⑦">4.4.15. Canceling an animation</a> <a href="#ref-for-unresolved⑤⑧">(2)</a> <a href="#ref-for-unresolved⑤⑨">(3)</a> <a href="#ref-for-unresolved⑥⓪">(4)</a> <a href="#ref-for-unresolved⑥①">(5)</a> <a href="#ref-for-unresolved⑥②">(6)</a>
    <li><a href="#ref-for-unresolved⑥③">4.4.16.1. Setting the playback rate of an animation</a>
    <li><a href="#ref-for-unresolved⑥④">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-unresolved⑥⑤">4.4.18. Play states</a> <a href="#ref-for-unresolved⑥⑥">(2)</a> <a href="#ref-for-unresolved⑥⑦">(3)</a> <a href="#ref-for-unresolved⑥⑧">(4)</a>
    <li><a href="#ref-for-unresolved⑥⑨">4.4.19. Animation events</a>
    <li><a href="#ref-for-unresolved⑦⓪">4.4.19.1. Sorting animation events</a> <a href="#ref-for-unresolved⑦①">(2)</a> <a href="#ref-for-unresolved⑦②">(3)</a> <a href="#ref-for-unresolved⑦③">(4)</a> <a href="#ref-for-unresolved⑦④">(5)</a> <a href="#ref-for-unresolved⑦⑤">(6)</a> <a href="#ref-for-unresolved⑦⑥">(7)</a> <a href="#ref-for-unresolved⑦⑦">(8)</a> <a href="#ref-for-unresolved⑦⑧">(9)</a>
    <li><a href="#ref-for-unresolved⑦⑨">4.5.4. Local time</a>
    <li><a href="#ref-for-unresolved⑧⓪">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-unresolved⑧①">(2)</a> <a href="#ref-for-unresolved⑧②">(3)</a> <a href="#ref-for-unresolved⑧③">(4)</a> <a href="#ref-for-unresolved⑧④">(5)</a>
    <li><a href="#ref-for-unresolved⑧⑤">4.6.1. Fill modes</a>
    <li><a href="#ref-for-unresolved⑧⑥">4.8.3.1. Calculating the active time</a> <a href="#ref-for-unresolved⑧⑦">(2)</a> <a href="#ref-for-unresolved⑧⑧">(3)</a> <a href="#ref-for-unresolved⑧⑨">(4)</a>
    <li><a href="#ref-for-unresolved⑨⓪">4.8.3.2. Calculating the overall progress</a> <a href="#ref-for-unresolved⑨①">(2)</a>
    <li><a href="#ref-for-unresolved⑨②">4.8.3.3. Calculating the simple iteration progress</a> <a href="#ref-for-unresolved⑨③">(2)</a>
    <li><a href="#ref-for-unresolved⑨④">4.8.4. Calculating the current iteration</a> <a href="#ref-for-unresolved⑨⑤">(2)</a>
    <li><a href="#ref-for-unresolved⑨⑥">4.9.1. Calculating the directed progress</a> <a href="#ref-for-unresolved⑨⑦">(2)</a>
    <li><a href="#ref-for-unresolved⑨⑧">4.10.1. Calculating the transformed progress</a> <a href="#ref-for-unresolved⑨⑨">(2)</a>
    <li><a href="#ref-for-unresolved①⓪⓪">5.3.3. The effect value of
  a keyframe effect</a>
    <li><a href="#ref-for-unresolved①⓪①">6.1. Time values in the programming interface</a>
    <li><a href="#ref-for-unresolved①⓪②">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="timeline">
   <b><a href="#timeline">#timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline">4.3. Timelines</a> <a href="#ref-for-timeline①">(2)</a> <a href="#ref-for-timeline②">(3)</a> <a href="#ref-for-timeline③">(4)</a> <a href="#ref-for-timeline④">(5)</a> <a href="#ref-for-timeline⑤">(6)</a> <a href="#ref-for-timeline⑥">(7)</a>
    <li><a href="#ref-for-timeline⑦">4.3.1. Document timelines</a>
    <li><a href="#ref-for-timeline⑧">4.4. Animations</a> <a href="#ref-for-timeline⑨">(2)</a> <a href="#ref-for-timeline①⓪">(3)</a> <a href="#ref-for-timeline①①">(4)</a> <a href="#ref-for-timeline①②">(5)</a> <a href="#ref-for-timeline①③">(6)</a> <a href="#ref-for-timeline①④">(7)</a>
    <li><a href="#ref-for-timeline①⑤">4.4.1. Setting the timeline of an animation</a> <a href="#ref-for-timeline①⑥">(2)</a>
    <li><a href="#ref-for-timeline①⑦">4.4.2. Responding to a newly inactive
  timeline</a> <a href="#ref-for-timeline①⑧">(2)</a> <a href="#ref-for-timeline①⑨">(3)</a>
    <li><a href="#ref-for-timeline②⓪">4.4.4. The current time of an animation</a> <a href="#ref-for-timeline②①">(2)</a> <a href="#ref-for-timeline②②">(3)</a>
    <li><a href="#ref-for-timeline②③">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-timeline②④">(2)</a> <a href="#ref-for-timeline②⑤">(3)</a> <a href="#ref-for-timeline②⑥">(4)</a> <a href="#ref-for-timeline②⑦">(5)</a>
    <li><a href="#ref-for-timeline②⑧">4.4.6. Setting the start time of an animation</a> <a href="#ref-for-timeline②⑨">(2)</a>
    <li><a href="#ref-for-timeline③⓪">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-timeline③①">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-timeline③②">4.4.13. Updating the finished state</a> <a href="#ref-for-timeline③③">(2)</a>
    <li><a href="#ref-for-timeline③④">4.4.14. Finishing an animation</a> <a href="#ref-for-timeline③⑤">(2)</a>
    <li><a href="#ref-for-timeline③⑥">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-timeline③⑦">4.4.16. Speed control</a> <a href="#ref-for-timeline③⑧">(2)</a> <a href="#ref-for-timeline③⑨">(3)</a>
    <li><a href="#ref-for-timeline④⓪">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-timeline④①">4.4.17. Reversing an animation</a> <a href="#ref-for-timeline④②">(2)</a>
    <li><a href="#ref-for-timeline④③">4.4.19. Animation events</a> <a href="#ref-for-timeline④④">(2)</a>
    <li><a href="#ref-for-timeline④⑤">4.4.19.1. Sorting animation events</a> <a href="#ref-for-timeline④⑥">(2)</a> <a href="#ref-for-timeline④⑦">(3)</a>
    <li><a href="#ref-for-timeline④⑧">5.5.2. Removing replaced animations</a> <a href="#ref-for-timeline④⑨">(2)</a> <a href="#ref-for-timeline⑤⓪">(3)</a>
    <li><a href="#ref-for-timeline⑤①">6.2. The AnimationTimeline interface</a>
    <li><a href="#ref-for-timeline⑤②">6.4. The Animation interface</a> <a href="#ref-for-timeline⑤③">(2)</a>
    <li><a href="#ref-for-timeline⑤④">6.12. The AnimationPlaybackEvent interface</a>
    <li><a href="#ref-for-timeline⑤⑤">6.13. Model liveness</a>
    <li><a href="#ref-for-timeline⑤⑥">8. Interaction with page display</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="timeline-current-time">
   <b><a href="#timeline-current-time">#timeline-current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline-current-time">4.3. Timelines</a> <a href="#ref-for-timeline-current-time①">(2)</a> <a href="#ref-for-timeline-current-time②">(3)</a> <a href="#ref-for-timeline-current-time③">(4)</a>
    <li><a href="#ref-for-timeline-current-time④">4.3.1. Document timelines</a>
    <li><a href="#ref-for-timeline-current-time⑤">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-timeline-current-time⑥">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-timeline-current-time⑦">5.5.2. Removing replaced animations</a> <a href="#ref-for-timeline-current-time⑧">(2)</a>
    <li><a href="#ref-for-timeline-current-time⑨">6.2. The AnimationTimeline interface</a>
    <li><a href="#ref-for-timeline-current-time①⓪">6.13. Model liveness</a> <a href="#ref-for-timeline-current-time①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inactive-timeline">
   <b><a href="#inactive-timeline">#inactive-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inactive-timeline">4.3.1. Document timelines</a> <a href="#ref-for-inactive-timeline①">(2)</a> <a href="#ref-for-inactive-timeline②">(3)</a>
    <li><a href="#ref-for-inactive-timeline③">4.4.2. Responding to a newly inactive
  timeline</a> <a href="#ref-for-inactive-timeline④">(2)</a>
    <li><a href="#ref-for-inactive-timeline⑤">4.4.4. The current time of an animation</a>
    <li><a href="#ref-for-inactive-timeline⑥">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-inactive-timeline⑦">(2)</a>
    <li><a href="#ref-for-inactive-timeline⑧">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-inactive-timeline⑨">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-inactive-timeline①⓪">4.4.13. Updating the finished state</a> <a href="#ref-for-inactive-timeline①①">(2)</a>
    <li><a href="#ref-for-inactive-timeline①②">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-inactive-timeline①③">4.4.15. Canceling an animation</a> <a href="#ref-for-inactive-timeline①④">(2)</a>
    <li><a href="#ref-for-inactive-timeline①⑤">4.4.17. Reversing an animation</a>
    <li><a href="#ref-for-inactive-timeline①⑥">4.4.19. Animation events</a>
    <li><a href="#ref-for-inactive-timeline①⑦">4.4.19.1. Sorting animation events</a>
    <li><a href="#ref-for-inactive-timeline①⑧">6.2. The AnimationTimeline interface</a>
    <li><a href="#ref-for-inactive-timeline①⑨">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="monotonically-increasing-timeline">
   <b><a href="#monotonically-increasing-timeline">#monotonically-increasing-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-monotonically-increasing-timeline">4.3.1. Document timelines</a>
    <li><a href="#ref-for-monotonically-increasing-timeline①">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="timeline-time-to-origin-relative-time">
   <b><a href="#timeline-time-to-origin-relative-time">#timeline-time-to-origin-relative-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline-time-to-origin-relative-time">4.3.1. Document timelines</a>
    <li><a href="#ref-for-timeline-time-to-origin-relative-time①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-timeline-time-to-origin-relative-time②">4.4.19.1. Sorting animation events</a> <a href="#ref-for-timeline-time-to-origin-relative-time③">(2)</a>
    <li><a href="#ref-for-timeline-time-to-origin-relative-time④">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="timeline-associated-with-a-document">
   <b><a href="#timeline-associated-with-a-document">#timeline-associated-with-a-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline-associated-with-a-document">4.3. Timelines</a>
    <li><a href="#ref-for-timeline-associated-with-a-document①">4.3.1. Document timelines</a>
    <li><a href="#ref-for-timeline-associated-with-a-document②">4.4. Animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-animations-and-send-events">
   <b><a href="#update-animations-and-send-events">#update-animations-and-send-events</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-animations-and-send-events">4.3.1. Document timelines</a>
    <li><a href="#ref-for-update-animations-and-send-events①">4.3.2. The default document timeline</a>
    <li><a href="#ref-for-update-animations-and-send-events②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-update-animations-and-send-events③">4.4.19. Animation events</a>
    <li><a href="#ref-for-update-animations-and-send-events④">6.13. Model liveness</a> <a href="#ref-for-update-animations-and-send-events⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-frame">
   <b><a href="#animation-frame">#animation-frame</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-frame">4.3. Timelines</a> <a href="#ref-for-animation-frame①">(2)</a>
    <li><a href="#ref-for-animation-frame②">4.4.18. Play states</a>
    <li><a href="#ref-for-animation-frame③">4.5.5. Animation effect phases and
states</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-timeline">
   <b><a href="#document-timeline">#document-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-timeline">4.3.1. Document timelines</a> <a href="#ref-for-document-timeline①">(2)</a> <a href="#ref-for-document-timeline②">(3)</a>
    <li><a href="#ref-for-document-timeline③">4.3.2. The default document timeline</a> <a href="#ref-for-document-timeline④">(2)</a>
    <li><a href="#ref-for-document-timeline⑤">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-document-timeline⑥">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="origin-time">
   <b><a href="#origin-time">#origin-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-origin-time">4.3.1. Document timelines</a>
    <li><a href="#ref-for-origin-time①">4.3.2. The default document timeline</a>
    <li><a href="#ref-for-origin-time②">6.3. The DocumentTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="default-document-timeline">
   <b><a href="#default-document-timeline">#default-document-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-document-timeline">4.3.2. The default document timeline</a> <a href="#ref-for-default-document-timeline①">(2)</a> <a href="#ref-for-default-document-timeline②">(3)</a>
    <li><a href="#ref-for-default-document-timeline③">4.7.3. Iteration time space</a>
    <li><a href="#ref-for-default-document-timeline④">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-default-document-timeline⑤">6.4. The Animation interface</a> <a href="#ref-for-default-document-timeline⑥">(2)</a>
    <li><a href="#ref-for-default-document-timeline⑦">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-default-document-timeline⑧">6.9. Extensions to the Document interface</a>
    <li><a href="#ref-for-default-document-timeline⑨">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-animation">
   <b><a href="#concept-animation">#concept-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-animation">2. Specification conventions</a>
    <li><a href="#ref-for-concept-animation①">4.3. Timelines</a> <a href="#ref-for-concept-animation②">(2)</a>
    <li><a href="#ref-for-concept-animation③">4.4. Animations</a> <a href="#ref-for-concept-animation④">(2)</a> <a href="#ref-for-concept-animation⑤">(3)</a> <a href="#ref-for-concept-animation⑥">(4)</a> <a href="#ref-for-concept-animation⑦">(5)</a>
    <li><a href="#ref-for-concept-animation⑧">4.4.2. Responding to a newly inactive
  timeline</a> <a href="#ref-for-concept-animation⑨">(2)</a> <a href="#ref-for-concept-animation①⓪">(3)</a>
    <li><a href="#ref-for-concept-animation①①">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-concept-animation①②">4.4.4. The current time of an animation</a>
    <li><a href="#ref-for-concept-animation①③">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-concept-animation①④">4.4.7. Waiting for the associated effect</a> <a href="#ref-for-concept-animation①⑤">(2)</a>
    <li><a href="#ref-for-concept-animation①⑥">4.4.8. The current ready promise</a>
    <li><a href="#ref-for-concept-animation①⑦">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-concept-animation①⑧">4.4.11. Reaching the end</a> <a href="#ref-for-concept-animation①⑨">(2)</a>
    <li><a href="#ref-for-concept-animation②⓪">4.4.13. Updating the finished state</a> <a href="#ref-for-concept-animation②①">(2)</a> <a href="#ref-for-concept-animation②②">(3)</a>
    <li><a href="#ref-for-concept-animation②③">4.4.16. Speed control</a>
    <li><a href="#ref-for-concept-animation②④">4.4.16.1. Setting the playback rate of an animation</a>
    <li><a href="#ref-for-concept-animation②⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-concept-animation②⑥">(2)</a> <a href="#ref-for-concept-animation②⑦">(3)</a> <a href="#ref-for-concept-animation②⑧">(4)</a>
    <li><a href="#ref-for-concept-animation②⑨">4.4.17. Reversing an animation</a>
    <li><a href="#ref-for-concept-animation③⓪">4.4.18. Play states</a> <a href="#ref-for-concept-animation③①">(2)</a>
    <li><a href="#ref-for-concept-animation③②">4.4.19. Animation events</a>
    <li><a href="#ref-for-concept-animation③③">4.4.19.2. Animation playback events</a> <a href="#ref-for-concept-animation③④">(2)</a>
    <li><a href="#ref-for-concept-animation③⑤">4.4.19.3. Types of animation playback events</a>
    <li><a href="#ref-for-concept-animation③⑥">4.5.1. Relationship between animation effects
  and animations</a> <a href="#ref-for-concept-animation③⑦">(2)</a> <a href="#ref-for-concept-animation③⑧">(3)</a>
    <li><a href="#ref-for-concept-animation③⑨">4.5.3. The active interval</a> <a href="#ref-for-concept-animation④⓪">(2)</a>
    <li><a href="#ref-for-concept-animation④①">4.5.4. Local time</a>
    <li><a href="#ref-for-concept-animation④②">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-concept-animation④③">(2)</a>
    <li><a href="#ref-for-concept-animation④④">4.8.1. Overview</a>
    <li><a href="#ref-for-concept-animation④⑤">5.2. Animating properties</a>
    <li><a href="#ref-for-concept-animation④⑥">5.4.1. Animation classes</a>
    <li><a href="#ref-for-concept-animation④⑦">5.4.2. The effect stack</a>
    <li><a href="#ref-for-concept-animation④⑧">5.4.5. Applying the composited result</a> <a href="#ref-for-concept-animation④⑨">(2)</a>
    <li><a href="#ref-for-concept-animation⑤⓪">5.5.1. Replace state</a> <a href="#ref-for-concept-animation⑤①">(2)</a> <a href="#ref-for-concept-animation⑤②">(3)</a>
    <li><a href="#ref-for-concept-animation⑤③">5.5.2. Removing replaced animations</a> <a href="#ref-for-concept-animation⑤④">(2)</a> <a href="#ref-for-concept-animation⑤⑤">(3)</a> <a href="#ref-for-concept-animation⑤⑥">(4)</a> <a href="#ref-for-concept-animation⑤⑦">(5)</a> <a href="#ref-for-concept-animation⑤⑧">(6)</a> <a href="#ref-for-concept-animation⑤⑨">(7)</a> <a href="#ref-for-concept-animation⑥⓪">(8)</a> <a href="#ref-for-concept-animation⑥①">(9)</a> <a href="#ref-for-concept-animation⑥②">(10)</a>
    <li><a href="#ref-for-concept-animation⑥③">5.6. Side effects of animation</a> <a href="#ref-for-concept-animation⑥④">(2)</a>
    <li><a href="#ref-for-concept-animation⑥⑤">6.4. The Animation interface</a> <a href="#ref-for-concept-animation⑥⑥">(2)</a> <a href="#ref-for-concept-animation⑥⑦">(3)</a> <a href="#ref-for-concept-animation⑥⑧">(4)</a> <a href="#ref-for-concept-animation⑥⑨">(5)</a>
    <li><a href="#ref-for-concept-animation⑦⓪">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-concept-animation⑦①">6.5.5. The ComputedEffectTiming dictionary</a>
    <li><a href="#ref-for-concept-animation⑦②">6.8. The Animatable interface mixin</a> <a href="#ref-for-concept-animation⑦③">(2)</a> <a href="#ref-for-concept-animation⑦④">(3)</a>
    <li><a href="#ref-for-concept-animation⑦⑤">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
    <li><a href="#ref-for-concept-animation⑦⑥">6.12. The AnimationPlaybackEvent interface</a> <a href="#ref-for-concept-animation⑦⑦">(2)</a> <a href="#ref-for-concept-animation⑦⑧">(3)</a> <a href="#ref-for-concept-animation⑦⑨">(4)</a>
    <li><a href="#ref-for-concept-animation⑧⓪">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-effect">
   <b><a href="#associated-effect">#associated-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-effect">4.1.1. Stateless</a>
    <li><a href="#ref-for-associated-effect①">4.4. Animations</a> <a href="#ref-for-associated-effect②">(2)</a>
    <li><a href="#ref-for-associated-effect③">4.4.3. Setting the associated effect of an animation</a> <a href="#ref-for-associated-effect④">(2)</a> <a href="#ref-for-associated-effect⑤">(3)</a>
    <li><a href="#ref-for-associated-effect⑥">4.4.4. The current time of an animation</a>
    <li><a href="#ref-for-associated-effect⑦">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-associated-effect⑧">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-associated-effect⑨">4.4.10. Pausing an animation</a> <a href="#ref-for-associated-effect①⓪">(2)</a>
    <li><a href="#ref-for-associated-effect①①">4.4.11. Reaching the end</a> <a href="#ref-for-associated-effect①②">(2)</a> <a href="#ref-for-associated-effect①③">(3)</a> <a href="#ref-for-associated-effect①④">(4)</a> <a href="#ref-for-associated-effect①⑤">(5)</a> <a href="#ref-for-associated-effect①⑥">(6)</a>
    <li><a href="#ref-for-associated-effect①⑦">4.4.13. Updating the finished state</a> <a href="#ref-for-associated-effect①⑧">(2)</a>
    <li><a href="#ref-for-associated-effect①⑨">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-associated-effect②⓪">4.4.19.2. Animation playback events</a>
    <li><a href="#ref-for-associated-effect②①">4.5.1. Relationship between animation effects
  and animations</a> <a href="#ref-for-associated-effect②②">(2)</a>
    <li><a href="#ref-for-associated-effect②③">4.7.4. Interval timing</a>
    <li><a href="#ref-for-associated-effect②④">5.5.2. Removing replaced animations</a> <a href="#ref-for-associated-effect②⑤">(2)</a> <a href="#ref-for-associated-effect②⑥">(3)</a>
    <li><a href="#ref-for-associated-effect②⑦">6.4. The Animation interface</a> <a href="#ref-for-associated-effect②⑧">(2)</a> <a href="#ref-for-associated-effect②⑨">(3)</a> <a href="#ref-for-associated-effect③⓪">(4)</a>
    <li><a href="#ref-for-associated-effect③①">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-associated-effect③②">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-for-timing">
   <b><a href="#document-for-timing">#document-for-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-for-timing">4.4. Animations</a>
    <li><a href="#ref-for-document-for-timing①">4.4.13. Updating the finished state</a> <a href="#ref-for-document-for-timing②">(2)</a>
    <li><a href="#ref-for-document-for-timing③">4.4.15. Canceling an animation</a> <a href="#ref-for-document-for-timing④">(2)</a>
    <li><a href="#ref-for-document-for-timing⑤">5.5.2. Removing replaced animations</a> <a href="#ref-for-document-for-timing⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="start-time">
   <b><a href="#start-time">#start-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start-time">2. Specification conventions</a>
    <li><a href="#ref-for-start-time①">4.4.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-start-time②">4.4.4. The current time of an animation</a> <a href="#ref-for-start-time③">(2)</a>
    <li><a href="#ref-for-start-time④">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-start-time⑤">(2)</a> <a href="#ref-for-start-time⑥">(3)</a> <a href="#ref-for-start-time⑦">(4)</a> <a href="#ref-for-start-time⑧">(5)</a> <a href="#ref-for-start-time⑨">(6)</a>
    <li><a href="#ref-for-start-time①⓪">4.4.6. Setting the start time of an animation</a> <a href="#ref-for-start-time①①">(2)</a>
    <li><a href="#ref-for-start-time①②">4.4.7. Waiting for the associated effect</a> <a href="#ref-for-start-time①③">(2)</a>
    <li><a href="#ref-for-start-time①④">4.4.9. Playing an animation</a> <a href="#ref-for-start-time①⑤">(2)</a> <a href="#ref-for-start-time①⑥">(3)</a> <a href="#ref-for-start-time①⑦">(4)</a> <a href="#ref-for-start-time①⑧">(5)</a> <a href="#ref-for-start-time①⑨">(6)</a>
    <li><a href="#ref-for-start-time②⓪">4.4.10. Pausing an animation</a> <a href="#ref-for-start-time②①">(2)</a> <a href="#ref-for-start-time②②">(3)</a> <a href="#ref-for-start-time②③">(4)</a>
    <li><a href="#ref-for-start-time②④">4.4.13. Updating the finished state</a> <a href="#ref-for-start-time②⑤">(2)</a> <a href="#ref-for-start-time②⑥">(3)</a>
    <li><a href="#ref-for-start-time②⑦">4.4.14. Finishing an animation</a> <a href="#ref-for-start-time②⑧">(2)</a> <a href="#ref-for-start-time②⑨">(3)</a> <a href="#ref-for-start-time③⓪">(4)</a>
    <li><a href="#ref-for-start-time③①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-start-time③②">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-start-time③③">(2)</a>
    <li><a href="#ref-for-start-time③④">4.4.18. Play states</a> <a href="#ref-for-start-time③⑤">(2)</a>
    <li><a href="#ref-for-start-time③⑥">4.4.19.1. Sorting animation events</a> <a href="#ref-for-start-time③⑦">(2)</a> <a href="#ref-for-start-time③⑧">(3)</a>
    <li><a href="#ref-for-start-time③⑨">4.5.3. The active interval</a> <a href="#ref-for-start-time④⓪">(2)</a> <a href="#ref-for-start-time④①">(3)</a> <a href="#ref-for-start-time④②">(4)</a>
    <li><a href="#ref-for-start-time④③">6.4. The Animation interface</a> <a href="#ref-for-start-time④④">(2)</a>
    <li><a href="#ref-for-start-time④⑤">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-start-time④⑥">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hold-time">
   <b><a href="#hold-time">#hold-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hold-time">4.4. Animations</a>
    <li><a href="#ref-for-hold-time①">4.4.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-hold-time②">4.4.4. The current time of an animation</a> <a href="#ref-for-hold-time③">(2)</a>
    <li><a href="#ref-for-hold-time④">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-hold-time⑤">(2)</a> <a href="#ref-for-hold-time⑥">(3)</a> <a href="#ref-for-hold-time⑦">(4)</a>
    <li><a href="#ref-for-hold-time⑧">4.4.6. Setting the start time of an animation</a> <a href="#ref-for-hold-time⑨">(2)</a> <a href="#ref-for-hold-time①⓪">(3)</a> <a href="#ref-for-hold-time①①">(4)</a>
    <li><a href="#ref-for-hold-time①②">4.4.9. Playing an animation</a> <a href="#ref-for-hold-time①③">(2)</a> <a href="#ref-for-hold-time①④">(3)</a> <a href="#ref-for-hold-time①⑤">(4)</a> <a href="#ref-for-hold-time①⑥">(5)</a> <a href="#ref-for-hold-time①⑦">(6)</a> <a href="#ref-for-hold-time①⑧">(7)</a> <a href="#ref-for-hold-time①⑨">(8)</a> <a href="#ref-for-hold-time②⓪">(9)</a> <a href="#ref-for-hold-time②①">(10)</a>
    <li><a href="#ref-for-hold-time②②">4.4.10. Pausing an animation</a> <a href="#ref-for-hold-time②③">(2)</a> <a href="#ref-for-hold-time②④">(3)</a> <a href="#ref-for-hold-time②⑤">(4)</a> <a href="#ref-for-hold-time②⑥">(5)</a> <a href="#ref-for-hold-time②⑦">(6)</a>
    <li><a href="#ref-for-hold-time②⑧">4.4.13. Updating the finished state</a> <a href="#ref-for-hold-time②⑨">(2)</a> <a href="#ref-for-hold-time③⓪">(3)</a> <a href="#ref-for-hold-time③①">(4)</a> <a href="#ref-for-hold-time③②">(5)</a> <a href="#ref-for-hold-time③③">(6)</a> <a href="#ref-for-hold-time③④">(7)</a> <a href="#ref-for-hold-time③⑤">(8)</a> <a href="#ref-for-hold-time③⑥">(9)</a> <a href="#ref-for-hold-time③⑦">(10)</a> <a href="#ref-for-hold-time③⑧">(11)</a>
    <li><a href="#ref-for-hold-time③⑨">4.4.14. Finishing an animation</a> <a href="#ref-for-hold-time④⓪">(2)</a>
    <li><a href="#ref-for-hold-time④①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-hold-time④②">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="global-animation-list">
   <b><a href="#global-animation-list">#global-animation-list</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-global-animation-list">5.4.2. The effect stack</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-the-timeline-of-an-animation">
   <b><a href="#set-the-timeline-of-an-animation">#set-the-timeline-of-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-timeline-of-an-animation">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-the-associated-effect-of-an-animation">
   <b><a href="#set-the-associated-effect-of-an-animation">#set-the-associated-effect-of-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-associated-effect-of-an-animation">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-set-the-associated-effect-of-an-animation①">6.4. The Animation interface</a> <a href="#ref-for-set-the-associated-effect-of-an-animation②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reset-an-animations-pending-tasks">
   <b><a href="#reset-an-animations-pending-tasks">#reset-an-animations-pending-tasks</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reset-an-animations-pending-tasks">4.4.15. Canceling an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-time">
   <b><a href="#current-time">#current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-time">4.3. Timelines</a> <a href="#ref-for-current-time①">(2)</a>
    <li><a href="#ref-for-current-time②">4.4. Animations</a>
    <li><a href="#ref-for-current-time③">4.4.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-current-time④">4.4.4. The current time of an animation</a> <a href="#ref-for-current-time⑤">(2)</a> <a href="#ref-for-current-time⑥">(3)</a> <a href="#ref-for-current-time⑦">(4)</a>
    <li><a href="#ref-for-current-time⑧">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-current-time⑨">(2)</a> <a href="#ref-for-current-time①⓪">(3)</a>
    <li><a href="#ref-for-current-time①①">4.4.6. Setting the start time of an animation</a> <a href="#ref-for-current-time①②">(2)</a> <a href="#ref-for-current-time①③">(3)</a> <a href="#ref-for-current-time①④">(4)</a>
    <li><a href="#ref-for-current-time①⑤">4.4.9. Playing an animation</a> <a href="#ref-for-current-time①⑥">(2)</a> <a href="#ref-for-current-time①⑦">(3)</a> <a href="#ref-for-current-time①⑧">(4)</a> <a href="#ref-for-current-time①⑨">(5)</a> <a href="#ref-for-current-time②⓪">(6)</a> <a href="#ref-for-current-time②①">(7)</a>
    <li><a href="#ref-for-current-time②②">4.4.10. Pausing an animation</a> <a href="#ref-for-current-time②③">(2)</a> <a href="#ref-for-current-time②④">(3)</a>
    <li><a href="#ref-for-current-time②⑤">4.4.11. Reaching the end</a> <a href="#ref-for-current-time②⑥">(2)</a> <a href="#ref-for-current-time②⑦">(3)</a> <a href="#ref-for-current-time②⑧">(4)</a> <a href="#ref-for-current-time②⑨">(5)</a> <a href="#ref-for-current-time③⓪">(6)</a> <a href="#ref-for-current-time③①">(7)</a>
    <li><a href="#ref-for-current-time③②">4.4.13. Updating the finished state</a> <a href="#ref-for-current-time③③">(2)</a> <a href="#ref-for-current-time③④">(3)</a> <a href="#ref-for-current-time③⑤">(4)</a> <a href="#ref-for-current-time③⑥">(5)</a> <a href="#ref-for-current-time③⑦">(6)</a> <a href="#ref-for-current-time③⑧">(7)</a> <a href="#ref-for-current-time③⑨">(8)</a>
    <li><a href="#ref-for-current-time④⓪">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-current-time④①">4.4.16. Speed control</a> <a href="#ref-for-current-time④②">(2)</a> <a href="#ref-for-current-time④③">(3)</a>
    <li><a href="#ref-for-current-time④④">4.4.16.1. Setting the playback rate of an animation</a>
    <li><a href="#ref-for-current-time④⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-current-time④⑥">(2)</a>
    <li><a href="#ref-for-current-time④⑦">4.4.18. Play states</a> <a href="#ref-for-current-time④⑧">(2)</a> <a href="#ref-for-current-time④⑨">(3)</a> <a href="#ref-for-current-time⑤⓪">(4)</a> <a href="#ref-for-current-time⑤①">(5)</a> <a href="#ref-for-current-time⑤②">(6)</a> <a href="#ref-for-current-time⑤③">(7)</a> <a href="#ref-for-current-time⑤④">(8)</a>
    <li><a href="#ref-for-current-time⑤⑤">4.5.4. Local time</a>
    <li><a href="#ref-for-current-time⑤⑥">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-current-time⑤⑦">6.4. The Animation interface</a>
    <li><a href="#ref-for-current-time⑤⑧">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="silently-set-the-current-time">
   <b><a href="#silently-set-the-current-time">#silently-set-the-current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-silently-set-the-current-time">4.4.2. Responding to a newly inactive
  timeline</a>
    <li><a href="#ref-for-silently-set-the-current-time①">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-silently-set-the-current-time②">4.4.14. Finishing an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-the-current-time">
   <b><a href="#set-the-current-time">#set-the-current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-current-time">4.4.13. Updating the finished state</a> <a href="#ref-for-set-the-current-time①">(2)</a>
    <li><a href="#ref-for-set-the-current-time②">4.4.16.1. Setting the playback rate of an animation</a>
    <li><a href="#ref-for-set-the-current-time③">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-the-start-time">
   <b><a href="#set-the-start-time">#set-the-start-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-start-time">2. Specification conventions</a>
    <li><a href="#ref-for-set-the-start-time①">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ready">
   <b><a href="#ready">#ready</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ready">4.4.3. Setting the associated effect of an animation</a> <a href="#ref-for-ready①">(2)</a>
    <li><a href="#ref-for-ready②">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-ready③">4.4.9. Playing an animation</a> <a href="#ref-for-ready④">(2)</a> <a href="#ref-for-ready⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-ready-promise">
   <b><a href="#current-ready-promise">#current-ready-promise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-ready-promise">4.4.3. Setting the associated effect of an animation</a> <a href="#ref-for-current-ready-promise①">(2)</a>
    <li><a href="#ref-for-current-ready-promise②">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-current-ready-promise③">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-current-ready-promise④">4.4.8. The current ready promise</a> <a href="#ref-for-current-ready-promise⑤">(2)</a> <a href="#ref-for-current-ready-promise⑥">(3)</a>
    <li><a href="#ref-for-current-ready-promise⑦">4.4.9. Playing an animation</a> <a href="#ref-for-current-ready-promise⑧">(2)</a> <a href="#ref-for-current-ready-promise⑨">(3)</a> <a href="#ref-for-current-ready-promise①⓪">(4)</a>
    <li><a href="#ref-for-current-ready-promise①①">4.4.10. Pausing an animation</a> <a href="#ref-for-current-ready-promise①②">(2)</a>
    <li><a href="#ref-for-current-ready-promise①③">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-current-ready-promise①④">4.4.14. Finishing an animation</a> <a href="#ref-for-current-ready-promise①⑤">(2)</a>
    <li><a href="#ref-for-current-ready-promise①⑥">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="play-an-animation">
   <b><a href="#play-an-animation">#play-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-play-an-animation">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-play-an-animation①">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-play-an-animation②">4.4.17. Reversing an animation</a> <a href="#ref-for-play-an-animation③">(2)</a>
    <li><a href="#ref-for-play-an-animation④">6.4. The Animation interface</a>
    <li><a href="#ref-for-play-an-animation⑤">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-play-task">
   <b><a href="#pending-play-task">#pending-play-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-play-task">4.4.3. Setting the associated effect of an animation</a> <a href="#ref-for-pending-play-task①">(2)</a> <a href="#ref-for-pending-play-task②">(3)</a>
    <li><a href="#ref-for-pending-play-task③">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-pending-play-task④">4.4.8. The current ready promise</a> <a href="#ref-for-pending-play-task⑤">(2)</a>
    <li><a href="#ref-for-pending-play-task⑥">4.4.9. Playing an animation</a> <a href="#ref-for-pending-play-task⑦">(2)</a> <a href="#ref-for-pending-play-task⑧">(3)</a> <a href="#ref-for-pending-play-task⑨">(4)</a>
    <li><a href="#ref-for-pending-play-task①⓪">4.4.10. Pausing an animation</a> <a href="#ref-for-pending-play-task①①">(2)</a> <a href="#ref-for-pending-play-task①②">(3)</a>
    <li><a href="#ref-for-pending-play-task①③">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-pending-play-task①④">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-pending-play-task①⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-pending-play-task①⑥">4.4.18. Play states</a> <a href="#ref-for-pending-play-task①⑦">(2)</a>
    <li><a href="#ref-for-pending-play-task①⑧">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pause-an-animation">
   <b><a href="#pause-an-animation">#pause-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pause-an-animation">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-pause-task">
   <b><a href="#pending-pause-task">#pending-pause-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-pause-task">4.4.3. Setting the associated effect of an animation</a> <a href="#ref-for-pending-pause-task①">(2)</a> <a href="#ref-for-pending-pause-task②">(3)</a>
    <li><a href="#ref-for-pending-pause-task③">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-pending-pause-task④">(2)</a>
    <li><a href="#ref-for-pending-pause-task⑤">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-pending-pause-task⑥">4.4.8. The current ready promise</a>
    <li><a href="#ref-for-pending-pause-task⑦">4.4.9. Playing an animation</a> <a href="#ref-for-pending-pause-task⑧">(2)</a>
    <li><a href="#ref-for-pending-pause-task⑨">4.4.10. Pausing an animation</a> <a href="#ref-for-pending-pause-task①⓪">(2)</a> <a href="#ref-for-pending-pause-task①①">(3)</a>
    <li><a href="#ref-for-pending-pause-task①②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-pending-pause-task①③">4.4.14. Finishing an animation</a> <a href="#ref-for-pending-pause-task①④">(2)</a>
    <li><a href="#ref-for-pending-pause-task①⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-pending-pause-task①⑥">4.4.18. Play states</a> <a href="#ref-for-pending-pause-task①⑦">(2)</a>
    <li><a href="#ref-for-pending-pause-task①⑧">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-finished-promise">
   <b><a href="#current-finished-promise">#current-finished-promise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-finished-promise">4.4.9. Playing an animation</a>
    <li><a href="#ref-for-current-finished-promise①">4.4.12. The current finished promise</a>
    <li><a href="#ref-for-current-finished-promise②">4.4.13. Updating the finished state</a> <a href="#ref-for-current-finished-promise③">(2)</a> <a href="#ref-for-current-finished-promise④">(3)</a> <a href="#ref-for-current-finished-promise⑤">(4)</a> <a href="#ref-for-current-finished-promise⑥">(5)</a> <a href="#ref-for-current-finished-promise⑦">(6)</a>
    <li><a href="#ref-for-current-finished-promise⑧">4.4.15. Canceling an animation</a> <a href="#ref-for-current-finished-promise⑨">(2)</a>
    <li><a href="#ref-for-current-finished-promise①⓪">5.2. Animating properties</a>
    <li><a href="#ref-for-current-finished-promise①①">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-effect-end">
   <b><a href="#associated-effect-end">#associated-effect-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-effect-end">4.4.9. Playing an animation</a> <a href="#ref-for-associated-effect-end①">(2)</a> <a href="#ref-for-associated-effect-end②">(3)</a> <a href="#ref-for-associated-effect-end③">(4)</a>
    <li><a href="#ref-for-associated-effect-end④">4.4.10. Pausing an animation</a> <a href="#ref-for-associated-effect-end⑤">(2)</a>
    <li><a href="#ref-for-associated-effect-end⑥">4.4.13. Updating the finished state</a> <a href="#ref-for-associated-effect-end⑦">(2)</a> <a href="#ref-for-associated-effect-end⑧">(3)</a> <a href="#ref-for-associated-effect-end⑨">(4)</a> <a href="#ref-for-associated-effect-end①⓪">(5)</a> <a href="#ref-for-associated-effect-end①①">(6)</a>
    <li><a href="#ref-for-associated-effect-end①②">4.4.14. Finishing an animation</a> <a href="#ref-for-associated-effect-end①③">(2)</a>
    <li><a href="#ref-for-associated-effect-end①④">4.4.18. Play states</a>
    <li><a href="#ref-for-associated-effect-end①⑤">6.4. The Animation interface</a> <a href="#ref-for-associated-effect-end①⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="previous-current-time">
   <b><a href="#previous-current-time">#previous-current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-previous-current-time">4.4.2. Responding to a newly inactive
  timeline</a> <a href="#ref-for-previous-current-time①">(2)</a>
    <li><a href="#ref-for-previous-current-time②">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-previous-current-time③">4.4.13. Updating the finished state</a> <a href="#ref-for-previous-current-time④">(2)</a> <a href="#ref-for-previous-current-time⑤">(3)</a> <a href="#ref-for-previous-current-time⑥">(4)</a> <a href="#ref-for-previous-current-time⑦">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-an-animations-finished-state">
   <b><a href="#update-an-animations-finished-state">#update-an-animations-finished-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-an-animations-finished-state">4.3. Timelines</a>
    <li><a href="#ref-for-update-an-animations-finished-state①">4.4.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-update-an-animations-finished-state②">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-update-an-animations-finished-state③">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-update-an-animations-finished-state④">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-update-an-animations-finished-state⑤">4.4.9. Playing an animation</a> <a href="#ref-for-update-an-animations-finished-state⑥">(2)</a>
    <li><a href="#ref-for-update-an-animations-finished-state⑦">4.4.10. Pausing an animation</a> <a href="#ref-for-update-an-animations-finished-state⑧">(2)</a>
    <li><a href="#ref-for-update-an-animations-finished-state⑨">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-update-an-animations-finished-state①⓪">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-update-an-animations-finished-state①①">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="finish-notification-steps">
   <b><a href="#finish-notification-steps">#finish-notification-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finish-notification-steps">4.4.13. Updating the finished state</a> <a href="#ref-for-finish-notification-steps①">(2)</a> <a href="#ref-for-finish-notification-steps②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="finish-an-animation">
   <b><a href="#finish-an-animation">#finish-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finish-an-animation">4.4.13. Updating the finished state</a> <a href="#ref-for-finish-an-animation①">(2)</a>
    <li><a href="#ref-for-finish-an-animation②">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cancel-an-animation">
   <b><a href="#cancel-an-animation">#cancel-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cancel-an-animation">4.4.2. Responding to a newly inactive
  timeline</a>
    <li><a href="#ref-for-cancel-an-animation①">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-cancel-an-animation②">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="playback-rate">
   <b><a href="#playback-rate">#playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-playback-rate">2. Specification conventions</a>
    <li><a href="#ref-for-playback-rate①">4.4.4. The current time of an animation</a> <a href="#ref-for-playback-rate②">(2)</a>
    <li><a href="#ref-for-playback-rate③">4.4.5. Setting the current time of an animation</a> <a href="#ref-for-playback-rate④">(2)</a>
    <li><a href="#ref-for-playback-rate⑤">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-playback-rate⑥">4.4.9. Playing an animation</a> <a href="#ref-for-playback-rate⑦">(2)</a> <a href="#ref-for-playback-rate⑧">(3)</a> <a href="#ref-for-playback-rate⑨">(4)</a> <a href="#ref-for-playback-rate①⓪">(5)</a> <a href="#ref-for-playback-rate①①">(6)</a> <a href="#ref-for-playback-rate①②">(7)</a>
    <li><a href="#ref-for-playback-rate①③">4.4.10. Pausing an animation</a> <a href="#ref-for-playback-rate①④">(2)</a>
    <li><a href="#ref-for-playback-rate①⑤">4.4.11. Reaching the end</a> <a href="#ref-for-playback-rate①⑥">(2)</a>
    <li><a href="#ref-for-playback-rate①⑦">4.4.13. Updating the finished state</a> <a href="#ref-for-playback-rate①⑧">(2)</a> <a href="#ref-for-playback-rate①⑨">(3)</a> <a href="#ref-for-playback-rate②⓪">(4)</a> <a href="#ref-for-playback-rate②①">(5)</a> <a href="#ref-for-playback-rate②②">(6)</a>
    <li><a href="#ref-for-playback-rate②③">4.4.14. Finishing an animation</a> <a href="#ref-for-playback-rate②④">(2)</a>
    <li><a href="#ref-for-playback-rate②⑤">4.4.16. Speed control</a> <a href="#ref-for-playback-rate②⑥">(2)</a>
    <li><a href="#ref-for-playback-rate②⑦">4.4.16.1. Setting the playback rate of an animation</a> <a href="#ref-for-playback-rate②⑧">(2)</a>
    <li><a href="#ref-for-playback-rate②⑨">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-playback-rate③⓪">(2)</a> <a href="#ref-for-playback-rate③①">(3)</a>
    <li><a href="#ref-for-playback-rate③②">4.4.18. Play states</a>
    <li><a href="#ref-for-playback-rate③③">4.4.19.1. Sorting animation events</a> <a href="#ref-for-playback-rate③④">(2)</a>
    <li><a href="#ref-for-playback-rate③⑤">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-playback-rate③⑥">(2)</a> <a href="#ref-for-playback-rate③⑦">(3)</a> <a href="#ref-for-playback-rate③⑧">(4)</a>
    <li><a href="#ref-for-playback-rate③⑨">6.4. The Animation interface</a> <a href="#ref-for-playback-rate④⓪">(2)</a> <a href="#ref-for-playback-rate④①">(3)</a> <a href="#ref-for-playback-rate④②">(4)</a> <a href="#ref-for-playback-rate④③">(5)</a> <a href="#ref-for-playback-rate④④">(6)</a> <a href="#ref-for-playback-rate④⑤">(7)</a>
    <li><a href="#ref-for-playback-rate④⑥">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-the-playback-rate">
   <b><a href="#set-the-playback-rate">#set-the-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-playback-rate">2. Specification conventions</a>
    <li><a href="#ref-for-set-the-playback-rate①">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-set-the-playback-rate②">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-playback-rate">
   <b><a href="#pending-playback-rate">#pending-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-playback-rate">4.4.9. Playing an animation</a> <a href="#ref-for-pending-playback-rate①">(2)</a>
    <li><a href="#ref-for-pending-playback-rate②">4.4.16.1. Setting the playback rate of an animation</a>
    <li><a href="#ref-for-pending-playback-rate③">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-pending-playback-rate④">(2)</a> <a href="#ref-for-pending-playback-rate⑤">(3)</a> <a href="#ref-for-pending-playback-rate⑥">(4)</a> <a href="#ref-for-pending-playback-rate⑦">(5)</a> <a href="#ref-for-pending-playback-rate⑧">(6)</a> <a href="#ref-for-pending-playback-rate⑨">(7)</a> <a href="#ref-for-pending-playback-rate①⓪">(8)</a> <a href="#ref-for-pending-playback-rate①①">(9)</a> <a href="#ref-for-pending-playback-rate①②">(10)</a> <a href="#ref-for-pending-playback-rate①③">(11)</a>
    <li><a href="#ref-for-pending-playback-rate①④">4.4.17. Reversing an animation</a> <a href="#ref-for-pending-playback-rate①⑤">(2)</a> <a href="#ref-for-pending-playback-rate①⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effective-playback-rate">
   <b><a href="#effective-playback-rate">#effective-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effective-playback-rate">4.4.9. Playing an animation</a> <a href="#ref-for-effective-playback-rate①">(2)</a> <a href="#ref-for-effective-playback-rate②">(3)</a>
    <li><a href="#ref-for-effective-playback-rate③">4.4.14. Finishing an animation</a> <a href="#ref-for-effective-playback-rate④">(2)</a>
    <li><a href="#ref-for-effective-playback-rate⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-effective-playback-rate⑥">4.4.17. Reversing an animation</a> <a href="#ref-for-effective-playback-rate⑦">(2)</a>
    <li><a href="#ref-for-effective-playback-rate⑧">4.4.18. Play states</a> <a href="#ref-for-effective-playback-rate⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="apply-any-pending-playback-rate">
   <b><a href="#apply-any-pending-playback-rate">#apply-any-pending-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-apply-any-pending-playback-rate">4.4.3. Setting the associated effect of an animation</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate①">4.4.5. Setting the current time of an animation</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate②">4.4.6. Setting the start time of an animation</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate③">4.4.9. Playing an animation</a> <a href="#ref-for-apply-any-pending-playback-rate④">(2)</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate⑤">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate⑥">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-apply-any-pending-playback-rate⑦">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-apply-any-pending-playback-rate⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="seamlessly-update-the-playback-rate">
   <b><a href="#seamlessly-update-the-playback-rate">#seamlessly-update-the-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-seamlessly-update-the-playback-rate">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reverse-an-animation">
   <b><a href="#reverse-an-animation">#reverse-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reverse-an-animation">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="play-state">
   <b><a href="#play-state">#play-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-play-state">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-play-state①">4.4.13. Updating the finished state</a> <a href="#ref-for-play-state②">(2)</a>
    <li><a href="#ref-for-play-state③">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-play-state④">4.4.16. Speed control</a>
    <li><a href="#ref-for-play-state⑤">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-play-state⑥">4.4.18. Play states</a>
    <li><a href="#ref-for-play-state⑦">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-play-state⑧">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="idle-play-state">
   <b><a href="#idle-play-state">#idle-play-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idle-play-state">4.4.2. Responding to a newly inactive
  timeline</a>
    <li><a href="#ref-for-idle-play-state①">4.4.14. Finishing an animation</a>
    <li><a href="#ref-for-idle-play-state②">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-idle-play-state③">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-idle-play-state④">4.4.18. Play states</a>
    <li><a href="#ref-for-idle-play-state⑤">4.4.19.3. Types of animation playback events</a>
    <li><a href="#ref-for-idle-play-state⑥">6.4.1. The AnimationPlayState enumeration</a>
    <li><a href="#ref-for-idle-play-state⑦">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paused-play-state">
   <b><a href="#paused-play-state">#paused-play-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paused-play-state">4.4.10. Pausing an animation</a> <a href="#ref-for-paused-play-state①">(2)</a>
    <li><a href="#ref-for-paused-play-state②">4.4.16. Speed control</a>
    <li><a href="#ref-for-paused-play-state③">4.4.16.2. Seamlessly updating the playback rate of an animation</a>
    <li><a href="#ref-for-paused-play-state④">4.4.18. Play states</a> <a href="#ref-for-paused-play-state⑤">(2)</a> <a href="#ref-for-paused-play-state⑥">(3)</a>
    <li><a href="#ref-for-paused-play-state⑦">6.4.1. The AnimationPlayState enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="finished-play-state">
   <b><a href="#finished-play-state">#finished-play-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finished-play-state">4.4.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-finished-play-state①">4.4.10. Pausing an animation</a>
    <li><a href="#ref-for-finished-play-state②">4.4.12. The current finished promise</a>
    <li><a href="#ref-for-finished-play-state③">4.4.13. Updating the finished state</a> <a href="#ref-for-finished-play-state④">(2)</a> <a href="#ref-for-finished-play-state⑤">(3)</a> <a href="#ref-for-finished-play-state⑥">(4)</a>
    <li><a href="#ref-for-finished-play-state⑦">4.4.16.2. Seamlessly updating the playback rate of an animation</a> <a href="#ref-for-finished-play-state⑧">(2)</a>
    <li><a href="#ref-for-finished-play-state⑨">4.4.18. Play states</a> <a href="#ref-for-finished-play-state①⓪">(2)</a> <a href="#ref-for-finished-play-state①①">(3)</a>
    <li><a href="#ref-for-finished-play-state①②">4.4.19.3. Types of animation playback events</a>
    <li><a href="#ref-for-finished-play-state①③">4.5.5. Animation effect phases and
states</a>
    <li><a href="#ref-for-finished-play-state①④">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-finished-play-state①⑤">6.4.1. The AnimationPlayState enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="running-play-state">
   <b><a href="#running-play-state">#running-play-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-running-play-state">4.4.8. The current ready promise</a>
    <li><a href="#ref-for-running-play-state①">4.4.18. Play states</a>
    <li><a href="#ref-for-running-play-state②">6.4.1. The AnimationPlayState enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-events">
   <b><a href="#animation-events">#animation-events</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-events">4.3. Timelines</a> <a href="#ref-for-animation-events①">(2)</a>
    <li><a href="#ref-for-animation-events②">4.4.19. Animation events</a> <a href="#ref-for-animation-events③">(2)</a> <a href="#ref-for-animation-events④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-animation-event-queue">
   <b><a href="#pending-animation-event-queue">#pending-animation-event-queue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-animation-event-queue">4.3. Timelines</a> <a href="#ref-for-pending-animation-event-queue①">(2)</a>
    <li><a href="#ref-for-pending-animation-event-queue②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-pending-animation-event-queue③">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-pending-animation-event-queue④">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scheduled-event-time">
   <b><a href="#scheduled-event-time">#scheduled-event-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scheduled-event-time">4.3. Timelines</a> <a href="#ref-for-scheduled-event-time①">(2)</a>
    <li><a href="#ref-for-scheduled-event-time②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-scheduled-event-time③">4.4.15. Canceling an animation</a> <a href="#ref-for-scheduled-event-time④">(2)</a>
    <li><a href="#ref-for-scheduled-event-time⑤">4.4.19. Animation events</a>
    <li><a href="#ref-for-scheduled-event-time⑥">5.5.2. Removing replaced animations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-time-to-timeline-time">
   <b><a href="#animation-time-to-timeline-time">#animation-time-to-timeline-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-time-to-timeline-time">4.4.19.1. Sorting animation events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-time-to-origin-relative-time">
   <b><a href="#animation-time-to-origin-relative-time">#animation-time-to-origin-relative-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-time-to-origin-relative-time">4.4.13. Updating the finished state</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-playback-events">
   <b><a href="#animation-playback-events">#animation-playback-events</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-playback-events">4.4.19. Animation events</a>
    <li><a href="#ref-for-animation-playback-events①">4.4.19.2. Animation playback events</a>
    <li><a href="#ref-for-animation-playback-events②">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="finish-event">
   <b><a href="#finish-event">#finish-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finish-event">4.4.13. Updating the finished state</a> <a href="#ref-for-finish-event①">(2)</a>
    <li><a href="#ref-for-finish-event②">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cancel-event">
   <b><a href="#cancel-event">#cancel-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cancel-event">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-cancel-event①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-cancel-event②">4.4.19.3. Types of animation playback events</a>
    <li><a href="#ref-for-cancel-event③">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="remove-event">
   <b><a href="#remove-event">#remove-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-event">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-remove-event①">6.4. The Animation interface</a>
    <li><a href="#ref-for-remove-event②">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-effect">
   <b><a href="#animation-effect">#animation-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-effect">2. Specification conventions</a>
    <li><a href="#ref-for-animation-effect①">4.3. Timelines</a>
    <li><a href="#ref-for-animation-effect②">4.4. Animations</a> <a href="#ref-for-animation-effect③">(2)</a> <a href="#ref-for-animation-effect④">(3)</a> <a href="#ref-for-animation-effect⑤">(4)</a>
    <li><a href="#ref-for-animation-effect⑥">4.5.1. Relationship between animation effects
  and animations</a> <a href="#ref-for-animation-effect⑦">(2)</a> <a href="#ref-for-animation-effect⑧">(3)</a>
    <li><a href="#ref-for-animation-effect⑨">4.5.2. Types of animation effects</a> <a href="#ref-for-animation-effect①⓪">(2)</a> <a href="#ref-for-animation-effect①①">(3)</a>
    <li><a href="#ref-for-animation-effect①②">4.5.3. The active interval</a> <a href="#ref-for-animation-effect①③">(2)</a> <a href="#ref-for-animation-effect①④">(3)</a> <a href="#ref-for-animation-effect①⑤">(4)</a> <a href="#ref-for-animation-effect①⑥">(5)</a> <a href="#ref-for-animation-effect①⑦">(6)</a> <a href="#ref-for-animation-effect①⑧">(7)</a> <a href="#ref-for-animation-effect①⑨">(8)</a> <a href="#ref-for-animation-effect②⓪">(9)</a>
    <li><a href="#ref-for-animation-effect②①">4.5.4. Local time</a> <a href="#ref-for-animation-effect②②">(2)</a>
    <li><a href="#ref-for-animation-effect②③">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-animation-effect②④">(2)</a> <a href="#ref-for-animation-effect②⑤">(3)</a> <a href="#ref-for-animation-effect②⑥">(4)</a> <a href="#ref-for-animation-effect②⑦">(5)</a> <a href="#ref-for-animation-effect②⑧">(6)</a> <a href="#ref-for-animation-effect②⑨">(7)</a> <a href="#ref-for-animation-effect③⓪">(8)</a> <a href="#ref-for-animation-effect③①">(9)</a> <a href="#ref-for-animation-effect③②">(10)</a> <a href="#ref-for-animation-effect③③">(11)</a> <a href="#ref-for-animation-effect③④">(12)</a> <a href="#ref-for-animation-effect③⑤">(13)</a> <a href="#ref-for-animation-effect③⑥">(14)</a> <a href="#ref-for-animation-effect③⑦">(15)</a> <a href="#ref-for-animation-effect③⑧">(16)</a> <a href="#ref-for-animation-effect③⑨">(17)</a> <a href="#ref-for-animation-effect④⓪">(18)</a> <a href="#ref-for-animation-effect④①">(19)</a> <a href="#ref-for-animation-effect④②">(20)</a> <a href="#ref-for-animation-effect④③">(21)</a> <a href="#ref-for-animation-effect④④">(22)</a> <a href="#ref-for-animation-effect④⑤">(23)</a> <a href="#ref-for-animation-effect④⑥">(24)</a> <a href="#ref-for-animation-effect④⑦">(25)</a>
    <li><a href="#ref-for-animation-effect④⑧">4.6. Fill behavior</a>
    <li><a href="#ref-for-animation-effect④⑨">4.7.2. Controlling iteration</a> <a href="#ref-for-animation-effect⑤⓪">(2)</a> <a href="#ref-for-animation-effect⑤①">(3)</a> <a href="#ref-for-animation-effect⑤②">(4)</a> <a href="#ref-for-animation-effect⑤③">(5)</a> <a href="#ref-for-animation-effect⑤④">(6)</a>
    <li><a href="#ref-for-animation-effect⑤⑤">4.8.1. Overview</a>
    <li><a href="#ref-for-animation-effect⑤⑥">4.8.3.1. Calculating the active time</a>
    <li><a href="#ref-for-animation-effect⑤⑦">4.9. Direction control</a> <a href="#ref-for-animation-effect⑤⑧">(2)</a>
    <li><a href="#ref-for-animation-effect⑤⑨">4.10. Time transformations</a> <a href="#ref-for-animation-effect⑥⓪">(2)</a>
    <li><a href="#ref-for-animation-effect⑥①">4.10.1. Calculating the transformed progress</a>
    <li><a href="#ref-for-animation-effect⑥②">4.11. The iteration progress</a>
    <li><a href="#ref-for-animation-effect⑥③">5. Animation model</a>
    <li><a href="#ref-for-animation-effect⑥④">5.1. Introduction</a> <a href="#ref-for-animation-effect⑥⑤">(2)</a>
    <li><a href="#ref-for-animation-effect⑥⑥">5.2. Animating properties</a> <a href="#ref-for-animation-effect⑥⑦">(2)</a>
    <li><a href="#ref-for-animation-effect⑥⑧">5.3. Keyframe effects</a>
    <li><a href="#ref-for-animation-effect⑥⑨">5.4. Combining effects</a> <a href="#ref-for-animation-effect⑦⓪">(2)</a>
    <li><a href="#ref-for-animation-effect⑦①">5.4.2. The effect stack</a> <a href="#ref-for-animation-effect⑦②">(2)</a>
    <li><a href="#ref-for-animation-effect⑦③">5.5.1. Replace state</a>
    <li><a href="#ref-for-animation-effect⑦④">5.5.2. Removing replaced animations</a> <a href="#ref-for-animation-effect⑦⑤">(2)</a> <a href="#ref-for-animation-effect⑦⑥">(3)</a>
    <li><a href="#ref-for-animation-effect⑦⑦">5.6. Side effects of animation</a>
    <li><a href="#ref-for-animation-effect⑦⑧">6.4. The Animation interface</a> <a href="#ref-for-animation-effect⑦⑨">(2)</a> <a href="#ref-for-animation-effect⑧⓪">(3)</a> <a href="#ref-for-animation-effect⑧①">(4)</a> <a href="#ref-for-animation-effect⑧②">(5)</a> <a href="#ref-for-animation-effect⑧③">(6)</a>
    <li><a href="#ref-for-animation-effect⑧④">6.5. The AnimationEffect interface</a> <a href="#ref-for-animation-effect⑧⑤">(2)</a> <a href="#ref-for-animation-effect⑧⑥">(3)</a> <a href="#ref-for-animation-effect⑧⑦">(4)</a>
    <li><a href="#ref-for-animation-effect⑧⑧">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-animation-effect⑧⑨">(2)</a> <a href="#ref-for-animation-effect⑨⓪">(3)</a> <a href="#ref-for-animation-effect⑨①">(4)</a> <a href="#ref-for-animation-effect⑨②">(5)</a> <a href="#ref-for-animation-effect⑨③">(6)</a> <a href="#ref-for-animation-effect⑨④">(7)</a> <a href="#ref-for-animation-effect⑨⑤">(8)</a> <a href="#ref-for-animation-effect⑨⑥">(9)</a>
    <li><a href="#ref-for-animation-effect⑨⑦">6.5.2. The FillMode enumeration</a>
    <li><a href="#ref-for-animation-effect⑨⑧">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-animation-effect⑨⑨">(2)</a> <a href="#ref-for-animation-effect①⓪⓪">(3)</a> <a href="#ref-for-animation-effect①⓪①">(4)</a> <a href="#ref-for-animation-effect①⓪②">(5)</a> <a href="#ref-for-animation-effect①⓪③">(6)</a> <a href="#ref-for-animation-effect①⓪④">(7)</a>
    <li><a href="#ref-for-animation-effect①⓪⑤">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-animation-effect①⓪⑥">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-animation-effect①⓪⑦">(2)</a> <a href="#ref-for-animation-effect①⓪⑧">(3)</a>
    <li><a href="#ref-for-animation-effect①⓪⑨">6.8. The Animatable interface mixin</a> <a href="#ref-for-animation-effect①①⓪">(2)</a>
    <li><a href="#ref-for-animation-effect①①①">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-with-an-animation">
   <b><a href="#associated-with-an-animation">#associated-with-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-with-an-animation">4.5.1. Relationship between animation effects
  and animations</a> <a href="#ref-for-associated-with-an-animation①">(2)</a>
    <li><a href="#ref-for-associated-with-an-animation②">4.5.4. Local time</a>
    <li><a href="#ref-for-associated-with-an-animation③">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-associated-with-an-animation④">(2)</a> <a href="#ref-for-associated-with-an-animation⑤">(3)</a> <a href="#ref-for-associated-with-an-animation⑥">(4)</a>
    <li><a href="#ref-for-associated-with-an-animation⑦">5.4.2. The effect stack</a>
    <li><a href="#ref-for-associated-with-an-animation⑧">5.5.2. Removing replaced animations</a> <a href="#ref-for-associated-with-an-animation⑨">(2)</a>
    <li><a href="#ref-for-associated-with-an-animation①⓪">6.4. The Animation interface</a> <a href="#ref-for-associated-with-an-animation①①">(2)</a> <a href="#ref-for-associated-with-an-animation①②">(3)</a> <a href="#ref-for-associated-with-an-animation①③">(4)</a>
    <li><a href="#ref-for-associated-with-an-animation①④">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-associated-with-an-animation①⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-with-a-timeline">
   <b><a href="#associated-with-a-timeline">#associated-with-a-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-with-a-timeline">4.3. Timelines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-interval">
   <b><a href="#active-interval">#active-interval</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-interval">4.5.3. The active interval</a> <a href="#ref-for-active-interval①">(2)</a> <a href="#ref-for-active-interval②">(3)</a> <a href="#ref-for-active-interval③">(4)</a> <a href="#ref-for-active-interval④">(5)</a> <a href="#ref-for-active-interval⑤">(6)</a> <a href="#ref-for-active-interval⑥">(7)</a> <a href="#ref-for-active-interval⑦">(8)</a> <a href="#ref-for-active-interval⑧">(9)</a>
    <li><a href="#ref-for-active-interval⑨">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-active-interval①⓪">(2)</a> <a href="#ref-for-active-interval①①">(3)</a>
    <li><a href="#ref-for-active-interval①②">4.6.1. Fill modes</a>
    <li><a href="#ref-for-active-interval①③">4.7.1. Iteration intervals</a> <a href="#ref-for-active-interval①④">(2)</a>
    <li><a href="#ref-for-active-interval①⑤">4.8.1. Overview</a>
    <li><a href="#ref-for-active-interval①⑥">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-active-interval①⑦">(2)</a> <a href="#ref-for-active-interval①⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="start-delay">
   <b><a href="#start-delay">#start-delay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start-delay">4.5.3. The active interval</a> <a href="#ref-for-start-delay①">(2)</a> <a href="#ref-for-start-delay②">(3)</a> <a href="#ref-for-start-delay③">(4)</a> <a href="#ref-for-start-delay④">(5)</a> <a href="#ref-for-start-delay⑤">(6)</a>
    <li><a href="#ref-for-start-delay⑥">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-start-delay⑦">(2)</a> <a href="#ref-for-start-delay⑧">(3)</a> <a href="#ref-for-start-delay⑨">(4)</a> <a href="#ref-for-start-delay①⓪">(5)</a>
    <li><a href="#ref-for-start-delay①①">4.8.1. Overview</a>
    <li><a href="#ref-for-start-delay①②">4.8.3.1. Calculating the active time</a> <a href="#ref-for-start-delay①③">(2)</a> <a href="#ref-for-start-delay①④">(3)</a> <a href="#ref-for-start-delay①⑤">(4)</a>
    <li><a href="#ref-for-start-delay①⑥">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-start-delay①⑦">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-start-delay①⑧">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-start-delay①⑨">6.6.1. Creating a new KeyframeEffect object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="end-delay">
   <b><a href="#end-delay">#end-delay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end-delay">4.5.3. The active interval</a> <a href="#ref-for-end-delay①">(2)</a>
    <li><a href="#ref-for-end-delay②">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-end-delay③">(2)</a>
    <li><a href="#ref-for-end-delay④">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-end-delay⑤">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-end-delay⑥">6.5.5. The ComputedEffectTiming dictionary</a>
    <li><a href="#ref-for-end-delay⑦">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="end-time">
   <b><a href="#end-time">#end-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end-time">4.4.11. Reaching the end</a> <a href="#ref-for-end-time①">(2)</a>
    <li><a href="#ref-for-end-time②">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-end-time③">4.5.3. The active interval</a>
    <li><a href="#ref-for-end-time④">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-end-time⑤">(2)</a> <a href="#ref-for-end-time⑥">(3)</a> <a href="#ref-for-end-time⑦">(4)</a>
    <li><a href="#ref-for-end-time⑧">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-end-time⑨">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="local-time">
   <b><a href="#local-time">#local-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-time">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-local-time①">(2)</a> <a href="#ref-for-local-time②">(3)</a> <a href="#ref-for-local-time③">(4)</a> <a href="#ref-for-local-time④">(5)</a> <a href="#ref-for-local-time⑤">(6)</a> <a href="#ref-for-local-time⑥">(7)</a> <a href="#ref-for-local-time⑦">(8)</a> <a href="#ref-for-local-time⑧">(9)</a> <a href="#ref-for-local-time⑨">(10)</a> <a href="#ref-for-local-time①⓪">(11)</a>
    <li><a href="#ref-for-local-time①①">4.8.1. Overview</a> <a href="#ref-for-local-time①②">(2)</a> <a href="#ref-for-local-time①③">(3)</a> <a href="#ref-for-local-time①④">(4)</a> <a href="#ref-for-local-time①⑤">(5)</a>
    <li><a href="#ref-for-local-time①⑥">4.8.3.1. Calculating the active time</a> <a href="#ref-for-local-time①⑦">(2)</a> <a href="#ref-for-local-time①⑧">(3)</a> <a href="#ref-for-local-time①⑨">(4)</a> <a href="#ref-for-local-time②⓪">(5)</a>
    <li><a href="#ref-for-local-time②①">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-local-time②②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-direction">
   <b><a href="#animation-direction">#animation-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-direction">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-animation-direction①">(2)</a> <a href="#ref-for-animation-direction②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="before-active-boundary-time">
   <b><a href="#before-active-boundary-time">#before-active-boundary-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-active-boundary-time">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-before-active-boundary-time①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-after-boundary-time">
   <b><a href="#active-after-boundary-time">#active-after-boundary-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-after-boundary-time">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-active-after-boundary-time①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="before-phase">
   <b><a href="#before-phase">#before-phase</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-phase">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-before-phase①">(2)</a> <a href="#ref-for-before-phase②">(3)</a>
    <li><a href="#ref-for-before-phase③">4.6.1. Fill modes</a> <a href="#ref-for-before-phase④">(2)</a>
    <li><a href="#ref-for-before-phase⑤">4.8.3.1. Calculating the active time</a>
    <li><a href="#ref-for-before-phase⑥">4.8.3.2. Calculating the overall progress</a>
    <li><a href="#ref-for-before-phase⑦">4.10.1. Calculating the transformed progress</a>
    <li><a href="#ref-for-before-phase⑧">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="after-phase">
   <b><a href="#after-phase">#after-phase</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-after-phase">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-after-phase①">(2)</a> <a href="#ref-for-after-phase②">(3)</a>
    <li><a href="#ref-for-after-phase③">4.6.1. Fill modes</a> <a href="#ref-for-after-phase④">(2)</a>
    <li><a href="#ref-for-after-phase⑤">4.8.3.1. Calculating the active time</a>
    <li><a href="#ref-for-after-phase⑥">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-after-phase⑦">4.8.4. Calculating the current iteration</a>
    <li><a href="#ref-for-after-phase⑧">4.10.1. Calculating the transformed progress</a>
    <li><a href="#ref-for-after-phase⑨">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-phase">
   <b><a href="#active-phase">#active-phase</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-phase">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-active-phase①">(2)</a> <a href="#ref-for-active-phase②">(3)</a> <a href="#ref-for-active-phase③">(4)</a>
    <li><a href="#ref-for-active-phase④">4.6.1. Fill modes</a>
    <li><a href="#ref-for-active-phase⑤">4.8.3.1. Calculating the active time</a>
    <li><a href="#ref-for-active-phase⑥">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-active-phase⑦">5.6. Side effects of animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-play">
   <b><a href="#in-play">#in-play</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-play">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-in-play①">(2)</a> <a href="#ref-for-in-play②">(3)</a> <a href="#ref-for-in-play③">(4)</a>
    <li><a href="#ref-for-in-play④">4.6. Fill behavior</a>
    <li><a href="#ref-for-in-play⑤">4.6.1. Fill modes</a> <a href="#ref-for-in-play⑥">(2)</a> <a href="#ref-for-in-play⑦">(3)</a> <a href="#ref-for-in-play⑧">(4)</a> <a href="#ref-for-in-play⑨">(5)</a>
    <li><a href="#ref-for-in-play①⓪">4.7.4. Interval timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current">
   <b><a href="#current">#current</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current">4.5.5. Animation effect phases and
states</a>
    <li><a href="#ref-for-current①">5.6. Side effects of animation</a>
    <li><a href="#ref-for-current②">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-current③">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-effect">
   <b><a href="#in-effect">#in-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-effect">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-in-effect①">(2)</a>
    <li><a href="#ref-for-in-effect②">5.4. Combining effects</a> <a href="#ref-for-in-effect③">(2)</a>
    <li><a href="#ref-for-in-effect④">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-in-effect⑤">5.6. Side effects of animation</a>
    <li><a href="#ref-for-in-effect⑥">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fill-mode">
   <b><a href="#fill-mode">#fill-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fill-mode">4.5.3. The active interval</a>
    <li><a href="#ref-for-fill-mode①">4.5.5. Animation effect phases and
states</a>
    <li><a href="#ref-for-fill-mode②">4.6. Fill behavior</a> <a href="#ref-for-fill-mode③">(2)</a> <a href="#ref-for-fill-mode④">(3)</a>
    <li><a href="#ref-for-fill-mode⑤">4.6.1. Fill modes</a>
    <li><a href="#ref-for-fill-mode⑥">4.8.3.1. Calculating the active time</a> <a href="#ref-for-fill-mode⑦">(2)</a> <a href="#ref-for-fill-mode⑧">(3)</a>
    <li><a href="#ref-for-fill-mode⑨">5.6. Side effects of animation</a>
    <li><a href="#ref-for-fill-mode①⓪">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-fill-mode①①">(2)</a> <a href="#ref-for-fill-mode①②">(3)</a> <a href="#ref-for-fill-mode①③">(4)</a>
    <li><a href="#ref-for-fill-mode①④">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-fill-mode①⑤">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-interval">
   <b><a href="#iteration-interval">#iteration-interval</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-interval">4.7.1. Iteration intervals</a>
    <li><a href="#ref-for-iteration-interval①">4.7.2. Controlling iteration</a>
    <li><a href="#ref-for-iteration-interval②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-duration">
   <b><a href="#iteration-duration">#iteration-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-duration">2. Specification conventions</a>
    <li><a href="#ref-for-iteration-duration①">4.7.1. Iteration intervals</a> <a href="#ref-for-iteration-duration②">(2)</a> <a href="#ref-for-iteration-duration③">(3)</a> <a href="#ref-for-iteration-duration④">(4)</a> <a href="#ref-for-iteration-duration⑤">(5)</a> <a href="#ref-for-iteration-duration⑥">(6)</a>
    <li><a href="#ref-for-iteration-duration⑦">4.8.1. Overview</a> <a href="#ref-for-iteration-duration⑧">(2)</a>
    <li><a href="#ref-for-iteration-duration⑨">4.8.2. Calculating the active duration</a> <a href="#ref-for-iteration-duration①⓪">(2)</a>
    <li><a href="#ref-for-iteration-duration①①">4.8.3.2. Calculating the overall progress</a> <a href="#ref-for-iteration-duration①②">(2)</a>
    <li><a href="#ref-for-iteration-duration①③">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-iteration-duration①④">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-iteration-duration①⑤">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-iteration-duration①⑥">6.6. The KeyframeEffect interface</a> <a href="#ref-for-iteration-duration①⑦">(2)</a>
    <li><a href="#ref-for-iteration-duration①⑧">6.6.1. Creating a new KeyframeEffect object</a>
    <li><a href="#ref-for-iteration-duration①⑨">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-count">
   <b><a href="#iteration-count">#iteration-count</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-count">4.7.1. Iteration intervals</a>
    <li><a href="#ref-for-iteration-count①">4.7.2. Controlling iteration</a> <a href="#ref-for-iteration-count②">(2)</a> <a href="#ref-for-iteration-count③">(3)</a> <a href="#ref-for-iteration-count④">(4)</a> <a href="#ref-for-iteration-count⑤">(5)</a> <a href="#ref-for-iteration-count⑥">(6)</a> <a href="#ref-for-iteration-count⑦">(7)</a>
    <li><a href="#ref-for-iteration-count⑧">4.8.1. Overview</a>
    <li><a href="#ref-for-iteration-count⑨">4.8.2. Calculating the active duration</a> <a href="#ref-for-iteration-count①⓪">(2)</a>
    <li><a href="#ref-for-iteration-count①①">4.8.3.2. Calculating the overall progress</a>
    <li><a href="#ref-for-iteration-count①②">4.8.3.3. Calculating the simple iteration progress</a> <a href="#ref-for-iteration-count①③">(2)</a>
    <li><a href="#ref-for-iteration-count①④">4.8.4. Calculating the current iteration</a>
    <li><a href="#ref-for-iteration-count①⑤">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-iteration-count①⑥">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-iteration-count①⑦">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-start">
   <b><a href="#iteration-start">#iteration-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-start">4.7.2. Controlling iteration</a> <a href="#ref-for-iteration-start①">(2)</a> <a href="#ref-for-iteration-start②">(3)</a> <a href="#ref-for-iteration-start③">(4)</a> <a href="#ref-for-iteration-start④">(5)</a> <a href="#ref-for-iteration-start⑤">(6)</a>
    <li><a href="#ref-for-iteration-start⑥">4.8.1. Overview</a>
    <li><a href="#ref-for-iteration-start⑦">4.8.3.2. Calculating the overall progress</a>
    <li><a href="#ref-for-iteration-start⑧">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-iteration-start⑨">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-iteration-start①⓪">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-iteration-start①①">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-duration">
   <b><a href="#active-duration">#active-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-duration">4.5.3. The active interval</a> <a href="#ref-for-active-duration①">(2)</a> <a href="#ref-for-active-duration②">(3)</a> <a href="#ref-for-active-duration③">(4)</a>
    <li><a href="#ref-for-active-duration④">4.5.5. Animation effect phases and
states</a>
    <li><a href="#ref-for-active-duration⑤">4.7.1. Iteration intervals</a> <a href="#ref-for-active-duration⑥">(2)</a> <a href="#ref-for-active-duration⑦">(3)</a> <a href="#ref-for-active-duration⑧">(4)</a>
    <li><a href="#ref-for-active-duration⑨">4.7.2. Controlling iteration</a>
    <li><a href="#ref-for-active-duration①⓪">4.8.1. Overview</a> <a href="#ref-for-active-duration①①">(2)</a> <a href="#ref-for-active-duration①②">(3)</a> <a href="#ref-for-active-duration①③">(4)</a>
    <li><a href="#ref-for-active-duration①④">4.8.2. Calculating the active duration</a> <a href="#ref-for-active-duration①⑤">(2)</a>
    <li><a href="#ref-for-active-duration①⑥">4.8.3.1. Calculating the active time</a>
    <li><a href="#ref-for-active-duration①⑦">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-active-duration①⑧">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-time">
   <b><a href="#active-time">#active-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-time">4.5.5. Animation effect phases and
states</a> <a href="#ref-for-active-time①">(2)</a> <a href="#ref-for-active-time②">(3)</a> <a href="#ref-for-active-time③">(4)</a>
    <li><a href="#ref-for-active-time④">4.6. Fill behavior</a>
    <li><a href="#ref-for-active-time⑤">4.6.1. Fill modes</a>
    <li><a href="#ref-for-active-time⑥">4.7.3. Iteration time space</a> <a href="#ref-for-active-time⑦">(2)</a> <a href="#ref-for-active-time⑧">(3)</a>
    <li><a href="#ref-for-active-time⑨">4.8.1. Overview</a> <a href="#ref-for-active-time①⓪">(2)</a>
    <li><a href="#ref-for-active-time①①">4.8.3.2. Calculating the overall progress</a> <a href="#ref-for-active-time①②">(2)</a>
    <li><a href="#ref-for-active-time①③">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-active-time①④">4.8.4. Calculating the current iteration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="overall-progress">
   <b><a href="#overall-progress">#overall-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-overall-progress">4.8.1. Overview</a> <a href="#ref-for-overall-progress①">(2)</a>
    <li><a href="#ref-for-overall-progress②">4.8.3.3. Calculating the simple iteration progress</a> <a href="#ref-for-overall-progress③">(2)</a> <a href="#ref-for-overall-progress④">(3)</a>
    <li><a href="#ref-for-overall-progress⑤">4.8.4. Calculating the current iteration</a> <a href="#ref-for-overall-progress⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="simple-iteration-progress">
   <b><a href="#simple-iteration-progress">#simple-iteration-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-simple-iteration-progress">4.8.1. Overview</a> <a href="#ref-for-simple-iteration-progress①">(2)</a>
    <li><a href="#ref-for-simple-iteration-progress②">4.8.4. Calculating the current iteration</a>
    <li><a href="#ref-for-simple-iteration-progress③">4.9.1. Calculating the directed progress</a> <a href="#ref-for-simple-iteration-progress④">(2)</a> <a href="#ref-for-simple-iteration-progress⑤">(3)</a> <a href="#ref-for-simple-iteration-progress⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-iteration">
   <b><a href="#current-iteration">#current-iteration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-iteration">4.7.1. Iteration intervals</a>
    <li><a href="#ref-for-current-iteration①">4.9.1. Calculating the directed progress</a>
    <li><a href="#ref-for-current-iteration②">5. Animation model</a>
    <li><a href="#ref-for-current-iteration③">5.1. Introduction</a>
    <li><a href="#ref-for-current-iteration④">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-current-iteration⑤">6.5.5. The ComputedEffectTiming dictionary</a> <a href="#ref-for-current-iteration⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="playback-direction">
   <b><a href="#playback-direction">#playback-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-playback-direction">4.8.1. Overview</a>
    <li><a href="#ref-for-playback-direction①">4.8.3.3. Calculating the simple iteration progress</a>
    <li><a href="#ref-for-playback-direction②">4.9.1. Calculating the directed progress</a> <a href="#ref-for-playback-direction③">(2)</a> <a href="#ref-for-playback-direction④">(3)</a>
    <li><a href="#ref-for-playback-direction⑤">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-playback-direction⑥">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-playback-direction⑦">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directed-progress">
   <b><a href="#directed-progress">#directed-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directed-progress">4.8.1. Overview</a> <a href="#ref-for-directed-progress①">(2)</a>
    <li><a href="#ref-for-directed-progress②">4.9. Direction control</a>
    <li><a href="#ref-for-directed-progress③">4.10.1. Calculating the transformed progress</a> <a href="#ref-for-directed-progress④">(2)</a> <a href="#ref-for-directed-progress⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="transformed-progress">
   <b><a href="#transformed-progress">#transformed-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transformed-progress">4.8.1. Overview</a> <a href="#ref-for-transformed-progress①">(2)</a>
    <li><a href="#ref-for-transformed-progress②">4.11. The iteration progress</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-progress">
   <b><a href="#iteration-progress">#iteration-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-progress">4.6.1. Fill modes</a> <a href="#ref-for-iteration-progress①">(2)</a> <a href="#ref-for-iteration-progress②">(3)</a>
    <li><a href="#ref-for-iteration-progress③">4.7.3. Iteration time space</a>
    <li><a href="#ref-for-iteration-progress④">4.7.4. Interval timing</a> <a href="#ref-for-iteration-progress⑤">(2)</a>
    <li><a href="#ref-for-iteration-progress⑥">4.8.1. Overview</a> <a href="#ref-for-iteration-progress⑦">(2)</a>
    <li><a href="#ref-for-iteration-progress⑧">5. Animation model</a>
    <li><a href="#ref-for-iteration-progress⑨">5.1. Introduction</a>
    <li><a href="#ref-for-iteration-progress①⓪">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-iteration-progress①①">(2)</a>
    <li><a href="#ref-for-iteration-progress①②">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="target-property">
   <b><a href="#target-property">#target-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-property">5.1. Introduction</a>
    <li><a href="#ref-for-target-property①">5.3.3. The effect value of
  a keyframe effect</a>
    <li><a href="#ref-for-target-property②">5.4. Combining effects</a> <a href="#ref-for-target-property③">(2)</a> <a href="#ref-for-target-property④">(3)</a> <a href="#ref-for-target-property⑤">(4)</a>
    <li><a href="#ref-for-target-property⑥">5.4.2. The effect stack</a>
    <li><a href="#ref-for-target-property⑦">5.4.5. Applying the composited result</a> <a href="#ref-for-target-property⑧">(2)</a>
    <li><a href="#ref-for-target-property⑨">5.5.1. Replace state</a>
    <li><a href="#ref-for-target-property①⓪">5.5.2. Removing replaced animations</a> <a href="#ref-for-target-property①①">(2)</a>
    <li><a href="#ref-for-target-property①②">6.4. The Animation interface</a> <a href="#ref-for-target-property①③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effect-value">
   <b><a href="#effect-value">#effect-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effect-value">5.3.1. Keyframes</a>
    <li><a href="#ref-for-effect-value①">5.3.2. Calculating computed keyframes</a>
    <li><a href="#ref-for-effect-value②">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-effect-value③">(2)</a>
    <li><a href="#ref-for-effect-value④">5.4. Combining effects</a> <a href="#ref-for-effect-value⑤">(2)</a> <a href="#ref-for-effect-value⑥">(3)</a> <a href="#ref-for-effect-value⑦">(4)</a> <a href="#ref-for-effect-value⑧">(5)</a>
    <li><a href="#ref-for-effect-value⑨">5.4.3. Calculating the result of an effect stack</a> <a href="#ref-for-effect-value①⓪">(2)</a> <a href="#ref-for-effect-value①①">(3)</a>
    <li><a href="#ref-for-effect-value①②">5.4.4. Effect composition</a> <a href="#ref-for-effect-value①③">(2)</a> <a href="#ref-for-effect-value①④">(3)</a> <a href="#ref-for-effect-value①⑤">(4)</a> <a href="#ref-for-effect-value①⑥">(5)</a> <a href="#ref-for-effect-value①⑦">(6)</a> <a href="#ref-for-effect-value①⑧">(7)</a> <a href="#ref-for-effect-value①⑨">(8)</a>
    <li><a href="#ref-for-effect-value②⓪">6.4. The Animation interface</a> <a href="#ref-for-effect-value②①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-animatable">
   <b><a href="#concept-animatable">#concept-animatable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-animatable">5.1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-type">
   <b><a href="#animation-type">#animation-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-type">5.1. Introduction</a>
    <li><a href="#ref-for-animation-type①">5.2. Animating properties</a> <a href="#ref-for-animation-type②">(2)</a>
    <li><a href="#ref-for-animation-type③">5.2.1. Custom Properties</a> <a href="#ref-for-animation-type④">(2)</a>
    <li><a href="#ref-for-animation-type⑤">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-animation-type⑥">(2)</a> <a href="#ref-for-animation-type⑦">(3)</a>
    <li><a href="#ref-for-animation-type⑧">5.4.4. Effect composition</a> <a href="#ref-for-animation-type⑨">(2)</a>
    <li><a href="#ref-for-animation-type①⓪">Appendix A: Animation types of existing properties</a> <a href="#ref-for-animation-type①①">(2)</a> <a href="#ref-for-animation-type①②">(3)</a>
    <li><a href="#ref-for-animation-type①③">Animation of font-weight</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="not-animatable">
   <b><a href="#not-animatable">#not-animatable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-not-animatable">5.2. Animating properties</a> <a href="#ref-for-not-animatable①">(2)</a>
    <li><a href="#ref-for-not-animatable②">5.3.3. The effect value of
  a keyframe effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="discrete">
   <b><a href="#discrete">#discrete</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-discrete">5.2. Animating properties</a> <a href="#ref-for-discrete①">(2)</a> <a href="#ref-for-discrete②">(3)</a> <a href="#ref-for-discrete③">(4)</a>
    <li><a href="#ref-for-discrete④">5.2.1. Custom Properties</a>
    <li><a href="#ref-for-discrete⑤">Animation of visibility</a>
    <li><a href="#ref-for-discrete⑥">Animation of box-shadow</a> <a href="#ref-for-discrete⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="by-computed-value">
   <b><a href="#by-computed-value">#by-computed-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-by-computed-value">5.2. Animating properties</a> <a href="#ref-for-by-computed-value①">(2)</a>
    <li><a href="#ref-for-by-computed-value②">5.2.1. Custom Properties</a>
    <li><a href="#ref-for-by-computed-value③">Appendix A: Animation types of existing properties</a>
    <li><a href="#ref-for-by-computed-value④">Animation of font-weight</a>
    <li><a href="#ref-for-by-computed-value⑤">Animation of box-shadow</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="keyframe-effect">
   <b><a href="#keyframe-effect">#keyframe-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframe-effect">4.4.7. Waiting for the associated effect</a>
    <li><a href="#ref-for-keyframe-effect①">4.5.2. Types of animation effects</a>
    <li><a href="#ref-for-keyframe-effect②">5.3.1. Keyframes</a> <a href="#ref-for-keyframe-effect③">(2)</a> <a href="#ref-for-keyframe-effect④">(3)</a> <a href="#ref-for-keyframe-effect⑤">(4)</a>
    <li><a href="#ref-for-keyframe-effect⑥">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-keyframe-effect⑦">(2)</a> <a href="#ref-for-keyframe-effect⑧">(3)</a>
    <li><a href="#ref-for-keyframe-effect⑨">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-keyframe-effect①⓪">(2)</a> <a href="#ref-for-keyframe-effect①①">(3)</a> <a href="#ref-for-keyframe-effect①②">(4)</a>
    <li><a href="#ref-for-keyframe-effect①③">5.4. Combining effects</a> <a href="#ref-for-keyframe-effect①④">(2)</a> <a href="#ref-for-keyframe-effect①⑤">(3)</a> <a href="#ref-for-keyframe-effect①⑥">(4)</a> <a href="#ref-for-keyframe-effect①⑦">(5)</a> <a href="#ref-for-keyframe-effect①⑧">(6)</a> <a href="#ref-for-keyframe-effect①⑨">(7)</a>
    <li><a href="#ref-for-keyframe-effect②⓪">5.4.2. The effect stack</a> <a href="#ref-for-keyframe-effect②①">(2)</a> <a href="#ref-for-keyframe-effect②②">(3)</a>
    <li><a href="#ref-for-keyframe-effect②③">5.4.3. Calculating the result of an effect stack</a> <a href="#ref-for-keyframe-effect②④">(2)</a> <a href="#ref-for-keyframe-effect②⑤">(3)</a> <a href="#ref-for-keyframe-effect②⑥">(4)</a> <a href="#ref-for-keyframe-effect②⑦">(5)</a>
    <li><a href="#ref-for-keyframe-effect②⑧">5.4.4. Effect composition</a>
    <li><a href="#ref-for-keyframe-effect②⑨">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-keyframe-effect③⓪">6.6. The KeyframeEffect interface</a> <a href="#ref-for-keyframe-effect③①">(2)</a> <a href="#ref-for-keyframe-effect③②">(3)</a> <a href="#ref-for-keyframe-effect③③">(4)</a> <a href="#ref-for-keyframe-effect③④">(5)</a> <a href="#ref-for-keyframe-effect③⑤">(6)</a>
    <li><a href="#ref-for-keyframe-effect③⑥">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-keyframe-effect③⑦">(2)</a>
    <li><a href="#ref-for-keyframe-effect③⑧">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-keyframe-effect③⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effect-target">
   <b><a href="#effect-target">#effect-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effect-target">5.3. Keyframe effects</a> <a href="#ref-for-effect-target①">(2)</a> <a href="#ref-for-effect-target②">(3)</a>
    <li><a href="#ref-for-effect-target③">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-effect-target④">(2)</a> <a href="#ref-for-effect-target⑤">(3)</a>
    <li><a href="#ref-for-effect-target⑥">5.5.2. Removing replaced animations</a> <a href="#ref-for-effect-target⑦">(2)</a>
    <li><a href="#ref-for-effect-target⑧">5.6. Side effects of animation</a> <a href="#ref-for-effect-target⑨">(2)</a>
    <li><a href="#ref-for-effect-target①⓪">6.4. The Animation interface</a> <a href="#ref-for-effect-target①①">(2)</a> <a href="#ref-for-effect-target①②">(3)</a> <a href="#ref-for-effect-target①③">(4)</a>
    <li><a href="#ref-for-effect-target①④">6.6. The KeyframeEffect interface</a> <a href="#ref-for-effect-target①⑤">(2)</a> <a href="#ref-for-effect-target①⑥">(3)</a>
    <li><a href="#ref-for-effect-target①⑦">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-effect-target①⑧">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="target-element">
   <b><a href="#target-element">#target-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-element">5.3. Keyframe effects</a> <a href="#ref-for-target-element①">(2)</a>
    <li><a href="#ref-for-target-element②">6.6. The KeyframeEffect interface</a> <a href="#ref-for-target-element③">(2)</a> <a href="#ref-for-target-element④">(3)</a>
    <li><a href="#ref-for-target-element⑤">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-target-element⑥">6.8. The Animatable interface mixin</a> <a href="#ref-for-target-element⑦">(2)</a>
    <li><a href="#ref-for-target-element⑧">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="target-pseudo-selector">
   <b><a href="#target-pseudo-selector">#target-pseudo-selector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-pseudo-selector">5.3. Keyframe effects</a> <a href="#ref-for-target-pseudo-selector①">(2)</a>
    <li><a href="#ref-for-target-pseudo-selector②">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="keyframe">
   <b><a href="#keyframe">#keyframe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframe">5.3.1. Keyframes</a> <a href="#ref-for-keyframe①">(2)</a> <a href="#ref-for-keyframe②">(3)</a> <a href="#ref-for-keyframe③">(4)</a> <a href="#ref-for-keyframe④">(5)</a> <a href="#ref-for-keyframe⑤">(6)</a> <a href="#ref-for-keyframe⑥">(7)</a>
    <li><a href="#ref-for-keyframe⑦">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-keyframe⑧">(2)</a> <a href="#ref-for-keyframe⑨">(3)</a> <a href="#ref-for-keyframe①⓪">(4)</a> <a href="#ref-for-keyframe①①">(5)</a> <a href="#ref-for-keyframe①②">(6)</a> <a href="#ref-for-keyframe①③">(7)</a> <a href="#ref-for-keyframe①④">(8)</a> <a href="#ref-for-keyframe①⑤">(9)</a> <a href="#ref-for-keyframe①⑥">(10)</a> <a href="#ref-for-keyframe①⑦">(11)</a> <a href="#ref-for-keyframe①⑧">(12)</a> <a href="#ref-for-keyframe①⑨">(13)</a> <a href="#ref-for-keyframe②⓪">(14)</a> <a href="#ref-for-keyframe②①">(15)</a> <a href="#ref-for-keyframe②②">(16)</a>
    <li><a href="#ref-for-keyframe②③">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-keyframe②④">(2)</a> <a href="#ref-for-keyframe②⑤">(3)</a> <a href="#ref-for-keyframe②⑥">(4)</a> <a href="#ref-for-keyframe②⑦">(5)</a> <a href="#ref-for-keyframe②⑧">(6)</a> <a href="#ref-for-keyframe②⑨">(7)</a> <a href="#ref-for-keyframe③⓪">(8)</a> <a href="#ref-for-keyframe③①">(9)</a> <a href="#ref-for-keyframe③②">(10)</a> <a href="#ref-for-keyframe③③">(11)</a> <a href="#ref-for-keyframe③④">(12)</a> <a href="#ref-for-keyframe③⑤">(13)</a> <a href="#ref-for-keyframe③⑥">(14)</a> <a href="#ref-for-keyframe③⑦">(15)</a> <a href="#ref-for-keyframe③⑧">(16)</a> <a href="#ref-for-keyframe③⑨">(17)</a> <a href="#ref-for-keyframe④⓪">(18)</a> <a href="#ref-for-keyframe④①">(19)</a> <a href="#ref-for-keyframe④②">(20)</a>
    <li><a href="#ref-for-keyframe④③">6.6. The KeyframeEffect interface</a> <a href="#ref-for-keyframe④④">(2)</a> <a href="#ref-for-keyframe④⑤">(3)</a> <a href="#ref-for-keyframe④⑥">(4)</a> <a href="#ref-for-keyframe④⑦">(5)</a> <a href="#ref-for-keyframe④⑧">(6)</a> <a href="#ref-for-keyframe④⑨">(7)</a> <a href="#ref-for-keyframe⑤⓪">(8)</a> <a href="#ref-for-keyframe⑤①">(9)</a> <a href="#ref-for-keyframe⑤②">(10)</a> <a href="#ref-for-keyframe⑤③">(11)</a>
    <li><a href="#ref-for-keyframe⑤④">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-keyframe⑤⑤">(2)</a> <a href="#ref-for-keyframe⑤⑥">(3)</a> <a href="#ref-for-keyframe⑤⑦">(4)</a> <a href="#ref-for-keyframe⑤⑧">(5)</a> <a href="#ref-for-keyframe⑤⑨">(6)</a> <a href="#ref-for-keyframe⑥⓪">(7)</a> <a href="#ref-for-keyframe⑥①">(8)</a> <a href="#ref-for-keyframe⑥②">(9)</a> <a href="#ref-for-keyframe⑥③">(10)</a> <a href="#ref-for-keyframe⑥④">(11)</a> <a href="#ref-for-keyframe⑥⑤">(12)</a> <a href="#ref-for-keyframe⑥⑥">(13)</a>
    <li><a href="#ref-for-keyframe⑥⑦">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-keyframe⑥⑧">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
    <li><a href="#ref-for-keyframe⑥⑨">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="keyframe-offset">
   <b><a href="#keyframe-offset">#keyframe-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframe-offset">5.3.1. Keyframes</a> <a href="#ref-for-keyframe-offset①">(2)</a>
    <li><a href="#ref-for-keyframe-offset②">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-keyframe-offset③">(2)</a> <a href="#ref-for-keyframe-offset④">(3)</a> <a href="#ref-for-keyframe-offset⑤">(4)</a>
    <li><a href="#ref-for-keyframe-offset⑥">6.6. The KeyframeEffect interface</a> <a href="#ref-for-keyframe-offset⑦">(2)</a>
    <li><a href="#ref-for-keyframe-offset⑧">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-keyframe-offset⑨">(2)</a> <a href="#ref-for-keyframe-offset①⓪">(3)</a> <a href="#ref-for-keyframe-offset①①">(4)</a> <a href="#ref-for-keyframe-offset①②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="loosely-sorted-by-offset">
   <b><a href="#loosely-sorted-by-offset">#loosely-sorted-by-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-loosely-sorted-by-offset">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="keyframe-specific-composite-operation">
   <b><a href="#keyframe-specific-composite-operation">#keyframe-specific-composite-operation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframe-specific-composite-operation">5.3.1. Keyframes</a>
    <li><a href="#ref-for-keyframe-specific-composite-operation①">6.6. The KeyframeEffect interface</a> <a href="#ref-for-keyframe-specific-composite-operation②">(2)</a>
    <li><a href="#ref-for-keyframe-specific-composite-operation③">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-keyframe-specific-composite-operation④">(2)</a> <a href="#ref-for-keyframe-specific-composite-operation⑤">(3)</a>
    <li><a href="#ref-for-keyframe-specific-composite-operation⑥">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="computed-keyframes">
   <b><a href="#computed-keyframes">#computed-keyframes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-keyframes">5.3.2. Calculating computed keyframes</a>
    <li><a href="#ref-for-computed-keyframes①">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-computed-keyframes②">(2)</a>
    <li><a href="#ref-for-computed-keyframes③">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="computed-keyframe-offset">
   <b><a href="#computed-keyframe-offset">#computed-keyframe-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-keyframe-offset">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-computed-keyframe-offset①">(2)</a> <a href="#ref-for-computed-keyframe-offset②">(3)</a> <a href="#ref-for-computed-keyframe-offset③">(4)</a> <a href="#ref-for-computed-keyframe-offset④">(5)</a> <a href="#ref-for-computed-keyframe-offset⑤">(6)</a> <a href="#ref-for-computed-keyframe-offset⑥">(7)</a> <a href="#ref-for-computed-keyframe-offset⑦">(8)</a> <a href="#ref-for-computed-keyframe-offset⑧">(9)</a> <a href="#ref-for-computed-keyframe-offset⑨">(10)</a> <a href="#ref-for-computed-keyframe-offset①⓪">(11)</a>
    <li><a href="#ref-for-computed-keyframe-offset①①">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-computed-keyframe-offset①②">(2)</a> <a href="#ref-for-computed-keyframe-offset①③">(3)</a> <a href="#ref-for-computed-keyframe-offset①④">(4)</a> <a href="#ref-for-computed-keyframe-offset①⑤">(5)</a> <a href="#ref-for-computed-keyframe-offset①⑥">(6)</a> <a href="#ref-for-computed-keyframe-offset①⑦">(7)</a> <a href="#ref-for-computed-keyframe-offset①⑧">(8)</a> <a href="#ref-for-computed-keyframe-offset①⑨">(9)</a> <a href="#ref-for-computed-keyframe-offset②⓪">(10)</a> <a href="#ref-for-computed-keyframe-offset②①">(11)</a> <a href="#ref-for-computed-keyframe-offset②②">(12)</a>
    <li><a href="#ref-for-computed-keyframe-offset②③">6.6. The KeyframeEffect interface</a> <a href="#ref-for-computed-keyframe-offset②④">(2)</a> <a href="#ref-for-computed-keyframe-offset②⑤">(3)</a>
    <li><a href="#ref-for-computed-keyframe-offset②⑥">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-computed-keyframe-offset②⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compute-missing-keyframe-offsets">
   <b><a href="#compute-missing-keyframe-offsets">#compute-missing-keyframe-offsets</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compute-missing-keyframe-offsets">5.3.2. Calculating computed keyframes</a>
    <li><a href="#ref-for-compute-missing-keyframe-offsets①">6.6. The KeyframeEffect interface</a> <a href="#ref-for-compute-missing-keyframe-offsets②">(2)</a>
    <li><a href="#ref-for-compute-missing-keyframe-offsets③">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offsetk">
   <b><a href="#offsetk">#offsetk</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offsetk">5.3.2. Calculating computed keyframes</a> <a href="#ref-for-offsetk①">(2)</a> <a href="#ref-for-offsetk②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="neutral-value-for-composition">
   <b><a href="#neutral-value-for-composition">#neutral-value-for-composition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-neutral-value-for-composition">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-neutral-value-for-composition①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composite">
   <b><a href="#composite">#composite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composite">5.4. Combining effects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-class">
   <b><a href="#animation-class">#animation-class</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-class">4.4. Animations</a>
    <li><a href="#ref-for-animation-class①">5.4.1. Animation classes</a>
    <li><a href="#ref-for-animation-class②">5.4.2. The effect stack</a> <a href="#ref-for-animation-class③">(2)</a>
    <li><a href="#ref-for-animation-class④">5.4.5. Applying the composited result</a> <a href="#ref-for-animation-class⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effect-stack">
   <b><a href="#effect-stack">#effect-stack</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effect-stack">5. Animation model</a>
    <li><a href="#ref-for-effect-stack①">5.4. Combining effects</a> <a href="#ref-for-effect-stack②">(2)</a> <a href="#ref-for-effect-stack③">(3)</a>
    <li><a href="#ref-for-effect-stack④">5.4.2. The effect stack</a> <a href="#ref-for-effect-stack⑤">(2)</a>
    <li><a href="#ref-for-effect-stack⑥">5.4.3. Calculating the result of an effect stack</a> <a href="#ref-for-effect-stack⑦">(2)</a> <a href="#ref-for-effect-stack⑧">(3)</a>
    <li><a href="#ref-for-effect-stack⑨">5.4.5. Applying the composited result</a> <a href="#ref-for-effect-stack①⓪">(2)</a> <a href="#ref-for-effect-stack①①">(3)</a> <a href="#ref-for-effect-stack①②">(4)</a>
    <li><a href="#ref-for-effect-stack①③">5.5.1. Replace state</a>
    <li><a href="#ref-for-effect-stack①④">6.4. The Animation interface</a>
    <li><a href="#ref-for-effect-stack①⑤">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-effect-stack①⑥">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-composite-order">
   <b><a href="#animation-composite-order">#animation-composite-order</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-composite-order">4.3. Timelines</a>
    <li><a href="#ref-for-animation-composite-order①">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-animation-composite-order②">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-animation-of-an-animation-effect">
   <b><a href="#associated-animation-of-an-animation-effect">#associated-animation-of-an-animation-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-animation-of-an-animation-effect">5.4.5. Applying the composited result</a> <a href="#ref-for-associated-animation-of-an-animation-effect①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="underlying-value">
   <b><a href="#underlying-value">#underlying-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-underlying-value">5.1. Introduction</a>
    <li><a href="#ref-for-underlying-value①">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-underlying-value②">(2)</a>
    <li><a href="#ref-for-underlying-value③">5.4.3. Calculating the result of an effect stack</a> <a href="#ref-for-underlying-value④">(2)</a> <a href="#ref-for-underlying-value⑤">(3)</a>
    <li><a href="#ref-for-underlying-value⑥">5.4.4. Effect composition</a> <a href="#ref-for-underlying-value⑦">(2)</a> <a href="#ref-for-underlying-value⑧">(3)</a> <a href="#ref-for-underlying-value⑨">(4)</a> <a href="#ref-for-underlying-value①⓪">(5)</a> <a href="#ref-for-underlying-value①①">(6)</a>
    <li><a href="#ref-for-underlying-value①②">5.4.5. Applying the composited result</a>
    <li><a href="#ref-for-underlying-value①③">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-underlying-value①④">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-underlying-value①⑤">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-underlying-value①⑥">(2)</a> <a href="#ref-for-underlying-value①⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composited-value">
   <b><a href="#composited-value">#composited-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composited-value">5.4.5. Applying the composited result</a> <a href="#ref-for-composited-value①">(2)</a> <a href="#ref-for-composited-value②">(3)</a> <a href="#ref-for-composited-value③">(4)</a> <a href="#ref-for-composited-value④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composite-operation">
   <b><a href="#composite-operation">#composite-operation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composite-operation">5.3.1. Keyframes</a> <a href="#ref-for-composite-operation①">(2)</a>
    <li><a href="#ref-for-composite-operation②">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-composite-operation③">(2)</a> <a href="#ref-for-composite-operation④">(3)</a> <a href="#ref-for-composite-operation⑤">(4)</a> <a href="#ref-for-composite-operation⑥">(5)</a> <a href="#ref-for-composite-operation⑦">(6)</a> <a href="#ref-for-composite-operation⑧">(7)</a> <a href="#ref-for-composite-operation⑨">(8)</a>
    <li><a href="#ref-for-composite-operation①⓪">5.4. Combining effects</a>
    <li><a href="#ref-for-composite-operation①①">5.4.4. Effect composition</a>
    <li><a href="#ref-for-composite-operation①②">6.6. The KeyframeEffect interface</a> <a href="#ref-for-composite-operation①③">(2)</a> <a href="#ref-for-composite-operation①④">(3)</a> <a href="#ref-for-composite-operation①⑤">(4)</a>
    <li><a href="#ref-for-composite-operation①⑥">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-composite-operation①⑦">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-composite-operation①⑧">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-composite-operation①⑨">(2)</a> <a href="#ref-for-composite-operation②⓪">(3)</a> <a href="#ref-for-composite-operation②①">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composite-operation-replace">
   <b><a href="#composite-operation-replace">#composite-operation-replace</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composite-operation-replace">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-composite-operation-replace①">(2)</a>
    <li><a href="#ref-for-composite-operation-replace②">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composite-operation-add">
   <b><a href="#composite-operation-add">#composite-operation-add</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composite-operation-add">5.3.3. The effect value of
  a keyframe effect</a> <a href="#ref-for-composite-operation-add①">(2)</a> <a href="#ref-for-composite-operation-add②">(3)</a>
    <li><a href="#ref-for-composite-operation-add③">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="composite-operation-accumulate">
   <b><a href="#composite-operation-accumulate">#composite-operation-accumulate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-composite-operation-accumulate">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="replace-state">
   <b><a href="#replace-state">#replace-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replace-state">5.5.1. Replace state</a> <a href="#ref-for-replace-state①">(2)</a>
    <li><a href="#ref-for-replace-state②">5.5.2. Removing replaced animations</a> <a href="#ref-for-replace-state③">(2)</a> <a href="#ref-for-replace-state④">(3)</a>
    <li><a href="#ref-for-replace-state⑤">5.6. Side effects of animation</a>
    <li><a href="#ref-for-replace-state⑥">6.4. The Animation interface</a> <a href="#ref-for-replace-state⑦">(2)</a> <a href="#ref-for-replace-state⑧">(3)</a>
    <li><a href="#ref-for-replace-state⑨">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-replace-state">
   <b><a href="#active-replace-state">#active-replace-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-replace-state">5.5.1. Replace state</a>
    <li><a href="#ref-for-active-replace-state①">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-active-replace-state②">6.4.2. The AnimationReplaceState enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="removed-replace-state">
   <b><a href="#removed-replace-state">#removed-replace-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-removed-replace-state">5.5.1. Replace state</a>
    <li><a href="#ref-for-removed-replace-state①">5.5.2. Removing replaced animations</a> <a href="#ref-for-removed-replace-state②">(2)</a>
    <li><a href="#ref-for-removed-replace-state③">5.6. Side effects of animation</a>
    <li><a href="#ref-for-removed-replace-state④">6.4. The Animation interface</a> <a href="#ref-for-removed-replace-state⑤">(2)</a>
    <li><a href="#ref-for-removed-replace-state⑥">6.4.2. The AnimationReplaceState enumeration</a>
    <li><a href="#ref-for-removed-replace-state⑦">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="persisted-replace-state">
   <b><a href="#persisted-replace-state">#persisted-replace-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-persisted-replace-state">6.4. The Animation interface</a>
    <li><a href="#ref-for-persisted-replace-state①">6.4.2. The AnimationReplaceState enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="replaceable-animation">
   <b><a href="#replaceable-animation">#replaceable-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaceable-animation">5.5.2. Removing replaced animations</a> <a href="#ref-for-replaceable-animation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="remove-replaced-animations">
   <b><a href="#remove-replaced-animations">#remove-replaced-animations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-replaced-animations">4.3. Timelines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationtimeline">
   <b><a href="#animationtimeline">#animationtimeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationtimeline">6.2. The AnimationTimeline interface</a>
    <li><a href="#ref-for-animationtimeline①">6.3. The DocumentTimeline interface</a>
    <li><a href="#ref-for-animationtimeline②">6.4. The Animation interface</a> <a href="#ref-for-animationtimeline③">(2)</a> <a href="#ref-for-animationtimeline④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationtimeline-currenttime">
   <b><a href="#dom-animationtimeline-currenttime">#dom-animationtimeline-currenttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationtimeline-currenttime">6.2. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-documenttimelineoptions">
   <b><a href="#dictdef-documenttimelineoptions">#dictdef-documenttimelineoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-documenttimelineoptions">6.3. The DocumentTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="documenttimeline">
   <b><a href="#documenttimeline">#documenttimeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-documenttimeline">6.3. The DocumentTimeline interface</a> <a href="#ref-for-documenttimeline①">(2)</a>
    <li><a href="#ref-for-documenttimeline②">6.9. Extensions to the Document interface</a> <a href="#ref-for-documenttimeline③">(2)</a> <a href="#ref-for-documenttimeline④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-documenttimelineoptions-origintime">
   <b><a href="#dom-documenttimelineoptions-origintime">#dom-documenttimelineoptions-origintime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-documenttimelineoptions-origintime">6.3. The DocumentTimeline interface</a> <a href="#ref-for-dom-documenttimelineoptions-origintime①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-documenttimeline-documenttimeline">
   <b><a href="#dom-documenttimeline-documenttimeline">#dom-documenttimeline-documenttimeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-documenttimeline-documenttimeline">6.3. The DocumentTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-documenttimeline-documenttimeline-options-options">
   <b><a href="#dom-documenttimeline-documenttimeline-options-options">#dom-documenttimeline-documenttimeline-options-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-documenttimeline-documenttimeline-options-options">6.3. The DocumentTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation">
   <b><a href="#animation">#animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation">6.4. The Animation interface</a> <a href="#ref-for-animation①">(2)</a> <a href="#ref-for-animation②">(3)</a> <a href="#ref-for-animation③">(4)</a> <a href="#ref-for-animation④">(5)</a> <a href="#ref-for-animation⑤">(6)</a> <a href="#ref-for-animation⑥">(7)</a>
    <li><a href="#ref-for-animation⑦">6.6.1. Creating a new KeyframeEffect object</a>
    <li><a href="#ref-for-animation⑧">6.8. The Animatable interface mixin</a> <a href="#ref-for-animation⑨">(2)</a> <a href="#ref-for-animation①⓪">(3)</a> <a href="#ref-for-animation①①">(4)</a> <a href="#ref-for-animation①②">(5)</a>
    <li><a href="#ref-for-animation①③">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a> <a href="#ref-for-animation①④">(2)</a>
    <li><a href="#ref-for-animation①⑤">6.13. Model liveness</a> <a href="#ref-for-animation①⑥">(2)</a>
    <li><a href="#ref-for-animation①⑦">11. Changes since last publication</a> <a href="#ref-for-animation①⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-animation">
   <b><a href="#dom-animation-animation">#dom-animation-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-animation">6.4. The Animation interface</a>
    <li><a href="#ref-for-dom-animation-animation①">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-animation-effect-timeline-effect">
   <b><a href="#dom-animation-animation-effect-timeline-effect">#dom-animation-animation-effect-timeline-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-animation-effect-timeline-effect">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-animation-effect-timeline-timeline">
   <b><a href="#dom-animation-animation-effect-timeline-timeline">#dom-animation-animation-effect-timeline-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-animation-effect-timeline-timeline">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-id">
   <b><a href="#dom-animation-id">#dom-animation-id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-id">6.4. The Animation interface</a>
    <li><a href="#ref-for-dom-animation-id①">6.8. The Animatable interface mixin</a> <a href="#ref-for-dom-animation-id②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-effect">
   <b><a href="#dom-animation-effect">#dom-animation-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-effect">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-timeline">
   <b><a href="#dom-animation-timeline">#dom-animation-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-timeline">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-starttime">
   <b><a href="#dom-animation-starttime">#dom-animation-starttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-starttime">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-currenttime">
   <b><a href="#dom-animation-currenttime">#dom-animation-currenttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-currenttime">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-playbackrate">
   <b><a href="#dom-animation-playbackrate">#dom-animation-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-playbackrate">6.4. The Animation interface</a> <a href="#ref-for-dom-animation-playbackrate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-playstate">
   <b><a href="#dom-animation-playstate">#dom-animation-playstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-playstate">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-replacestate">
   <b><a href="#dom-animation-replacestate">#dom-animation-replacestate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-replacestate">6.4. The Animation interface</a>
    <li><a href="#ref-for-dom-animation-replacestate①">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-pending">
   <b><a href="#dom-animation-pending">#dom-animation-pending</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-pending">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-ready">
   <b><a href="#dom-animation-ready">#dom-animation-ready</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-ready">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-finished">
   <b><a href="#dom-animation-finished">#dom-animation-finished</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-finished">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-onfinish">
   <b><a href="#dom-animation-onfinish">#dom-animation-onfinish</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-onfinish">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-oncancel">
   <b><a href="#dom-animation-oncancel">#dom-animation-oncancel</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-oncancel">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-onremove">
   <b><a href="#dom-animation-onremove">#dom-animation-onremove</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-onremove">6.4. The Animation interface</a>
    <li><a href="#ref-for-dom-animation-onremove①">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-cancel">
   <b><a href="#dom-animation-cancel">#dom-animation-cancel</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-cancel">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-finish">
   <b><a href="#dom-animation-finish">#dom-animation-finish</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-finish">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-dom-animation-finish①">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-play">
   <b><a href="#dom-animation-play">#dom-animation-play</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-play">6.4. The Animation interface</a> <a href="#ref-for-dom-animation-play①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-pause">
   <b><a href="#dom-animation-pause">#dom-animation-pause</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-pause">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-updateplaybackrate">
   <b><a href="#dom-animation-updateplaybackrate">#dom-animation-updateplaybackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-updateplaybackrate">6.4. The Animation interface</a> <a href="#ref-for-dom-animation-updateplaybackrate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-updateplaybackrate-playbackrate-playbackrate">
   <b><a href="#dom-animation-updateplaybackrate-playbackrate-playbackrate">#dom-animation-updateplaybackrate-playbackrate-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate">6.4. The Animation interface</a> <a href="#ref-for-dom-animation-updateplaybackrate-playbackrate-playbackrate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-reverse">
   <b><a href="#dom-animation-reverse">#dom-animation-reverse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-reverse">6.4. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-persist">
   <b><a href="#dom-animation-persist">#dom-animation-persist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-persist">6.4. The Animation interface</a> <a href="#ref-for-dom-animation-persist①">(2)</a>
    <li><a href="#ref-for-dom-animation-persist②">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-commitstyles">
   <b><a href="#dom-animation-commitstyles">#dom-animation-commitstyles</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-commitstyles">6.4. The Animation interface</a>
    <li><a href="#ref-for-dom-animation-commitstyles①">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="commit-computed-styles">
   <b><a href="#commit-computed-styles">#commit-computed-styles</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-commit-computed-styles">6.4. The Animation interface</a> <a href="#ref-for-commit-computed-styles①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-animationplaystate">
   <b><a href="#enumdef-animationplaystate">#enumdef-animationplaystate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-animationplaystate">6.4. The Animation interface</a> <a href="#ref-for-enumdef-animationplaystate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-animationreplacestate">
   <b><a href="#enumdef-animationreplacestate">#enumdef-animationreplacestate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-animationreplacestate">6.4. The Animation interface</a> <a href="#ref-for-enumdef-animationreplacestate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationeffect">
   <b><a href="#animationeffect">#animationeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationeffect">6.4. The Animation interface</a> <a href="#ref-for-animationeffect①">(2)</a> <a href="#ref-for-animationeffect②">(3)</a>
    <li><a href="#ref-for-animationeffect③">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-animationeffect④">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-animationeffect⑤">(2)</a>
    <li><a href="#ref-for-animationeffect⑥">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffect-gettiming">
   <b><a href="#dom-animationeffect-gettiming">#dom-animationeffect-gettiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-gettiming">6.5. The AnimationEffect interface</a> <a href="#ref-for-dom-animationeffect-gettiming①">(2)</a> <a href="#ref-for-dom-animationeffect-gettiming②">(3)</a> <a href="#ref-for-dom-animationeffect-gettiming③">(4)</a> <a href="#ref-for-dom-animationeffect-gettiming④">(5)</a>
    <li><a href="#ref-for-dom-animationeffect-gettiming⑤">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffect-getcomputedtiming">
   <b><a href="#dom-animationeffect-getcomputedtiming">#dom-animationeffect-getcomputedtiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-getcomputedtiming">6.5. The AnimationEffect interface</a> <a href="#ref-for-dom-animationeffect-getcomputedtiming①">(2)</a> <a href="#ref-for-dom-animationeffect-getcomputedtiming②">(3)</a> <a href="#ref-for-dom-animationeffect-getcomputedtiming③">(4)</a> <a href="#ref-for-dom-animationeffect-getcomputedtiming④">(5)</a> <a href="#ref-for-dom-animationeffect-getcomputedtiming⑤">(6)</a>
    <li><a href="#ref-for-dom-animationeffect-getcomputedtiming⑥">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffect-updatetiming">
   <b><a href="#dom-animationeffect-updatetiming">#dom-animationeffect-updatetiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-updatetiming">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-dom-animationeffect-updatetiming①">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffect-updatetiming-timing-timing">
   <b><a href="#dom-animationeffect-updatetiming-timing-timing">#dom-animationeffect-updatetiming-timing-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-updatetiming-timing-timing">6.5. The AnimationEffect interface</a> <a href="#ref-for-dom-animationeffect-updatetiming-timing-timing①">(2)</a> <a href="#ref-for-dom-animationeffect-updatetiming-timing-timing②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-effecttiming">
   <b><a href="#dictdef-effecttiming">#dictdef-effecttiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-effecttiming">6.5. The AnimationEffect interface</a> <a href="#ref-for-dictdef-effecttiming①">(2)</a> <a href="#ref-for-dictdef-effecttiming②">(3)</a> <a href="#ref-for-dictdef-effecttiming③">(4)</a> <a href="#ref-for-dictdef-effecttiming④">(5)</a>
    <li><a href="#ref-for-dictdef-effecttiming⑤">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-dictdef-effecttiming⑥">(2)</a>
    <li><a href="#ref-for-dictdef-effecttiming⑦">6.5.4. Updating the timing of an AnimationEffect</a>
    <li><a href="#ref-for-dictdef-effecttiming⑧">6.5.5. The ComputedEffectTiming dictionary</a>
    <li><a href="#ref-for-dictdef-effecttiming⑨">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-dictdef-effecttiming①⓪">6.6.1. Creating a new KeyframeEffect object</a>
    <li><a href="#ref-for-dictdef-effecttiming①①">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-dictdef-effecttiming①②">(2)</a> <a href="#ref-for-dictdef-effecttiming①③">(3)</a>
    <li><a href="#ref-for-dictdef-effecttiming①④">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-optionaleffecttiming">
   <b><a href="#dictdef-optionaleffecttiming">#dictdef-optionaleffecttiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-optionaleffecttiming">6.5. The AnimationEffect interface</a> <a href="#ref-for-dictdef-optionaleffecttiming①">(2)</a>
    <li><a href="#ref-for-dictdef-optionaleffecttiming②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dictdef-optionaleffecttiming③">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-delay">
   <b><a href="#dom-effecttiming-delay">#dom-effecttiming-delay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-delay">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dom-effecttiming-delay①">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-delay">
   <b><a href="#dom-optionaleffecttiming-delay">#dom-optionaleffecttiming-delay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-delay">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-enddelay">
   <b><a href="#dom-effecttiming-enddelay">#dom-effecttiming-enddelay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-enddelay">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dom-effecttiming-enddelay①">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-enddelay">
   <b><a href="#dom-optionaleffecttiming-enddelay">#dom-optionaleffecttiming-enddelay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-enddelay">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-fill">
   <b><a href="#dom-effecttiming-fill">#dom-effecttiming-fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-fill">6.5. The AnimationEffect interface</a> <a href="#ref-for-dom-effecttiming-fill①">(2)</a>
    <li><a href="#ref-for-dom-effecttiming-fill②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dom-effecttiming-fill③">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-fill">
   <b><a href="#dom-optionaleffecttiming-fill">#dom-optionaleffecttiming-fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-fill">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-iterationstart">
   <b><a href="#dom-effecttiming-iterationstart">#dom-effecttiming-iterationstart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-iterationstart">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-dom-effecttiming-iterationstart①">(2)</a> <a href="#ref-for-dom-effecttiming-iterationstart②">(3)</a> <a href="#ref-for-dom-effecttiming-iterationstart③">(4)</a>
    <li><a href="#ref-for-dom-effecttiming-iterationstart④">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dom-effecttiming-iterationstart⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-iterationstart">
   <b><a href="#dom-optionaleffecttiming-iterationstart">#dom-optionaleffecttiming-iterationstart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-iterationstart">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-iterations">
   <b><a href="#dom-effecttiming-iterations">#dom-effecttiming-iterations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-iterations">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-dom-effecttiming-iterations①">(2)</a> <a href="#ref-for-dom-effecttiming-iterations②">(3)</a>
    <li><a href="#ref-for-dom-effecttiming-iterations③">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dom-effecttiming-iterations④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-iterations">
   <b><a href="#dom-optionaleffecttiming-iterations">#dom-optionaleffecttiming-iterations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-iterations">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-duration">
   <b><a href="#dom-effecttiming-duration">#dom-effecttiming-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-duration">6.5. The AnimationEffect interface</a> <a href="#ref-for-dom-effecttiming-duration①">(2)</a>
    <li><a href="#ref-for-dom-effecttiming-duration②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-dom-effecttiming-duration③">(2)</a> <a href="#ref-for-dom-effecttiming-duration④">(3)</a>
    <li><a href="#ref-for-dom-effecttiming-duration⑤">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dom-effecttiming-duration⑥">(2)</a>
    <li><a href="#ref-for-dom-effecttiming-duration⑦">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-duration">
   <b><a href="#dom-optionaleffecttiming-duration">#dom-optionaleffecttiming-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-duration">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-direction">
   <b><a href="#dom-effecttiming-direction">#dom-effecttiming-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-direction">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dom-effecttiming-direction①">6.5.4. Updating the timing of an AnimationEffect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-direction">
   <b><a href="#dom-optionaleffecttiming-direction">#dom-optionaleffecttiming-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-direction">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-effecttiming-easing">
   <b><a href="#dom-effecttiming-easing">#dom-effecttiming-easing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-effecttiming-easing">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
    <li><a href="#ref-for-dom-effecttiming-easing①">6.5.4. Updating the timing of an AnimationEffect</a> <a href="#ref-for-dom-effecttiming-easing②">(2)</a>
    <li><a href="#ref-for-dom-effecttiming-easing③">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-dom-effecttiming-easing④">(2)</a> <a href="#ref-for-dom-effecttiming-easing⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-optionaleffecttiming-easing">
   <b><a href="#dom-optionaleffecttiming-easing">#dom-optionaleffecttiming-easing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-optionaleffecttiming-easing">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-fillmode">
   <b><a href="#enumdef-fillmode">#enumdef-fillmode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-fillmode">6.5. The AnimationEffect interface</a> <a href="#ref-for-enumdef-fillmode①">(2)</a>
    <li><a href="#ref-for-enumdef-fillmode②">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-enumdef-fillmode③">(2)</a> <a href="#ref-for-enumdef-fillmode④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-playbackdirection">
   <b><a href="#enumdef-playbackdirection">#enumdef-playbackdirection</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-playbackdirection">6.5.1. The EffectTiming and OptionalEffectTiming dictionaries</a> <a href="#ref-for-enumdef-playbackdirection①">(2)</a> <a href="#ref-for-enumdef-playbackdirection②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-the-timing-properties-of-an-animation-effect">
   <b><a href="#update-the-timing-properties-of-an-animation-effect">#update-the-timing-properties-of-an-animation-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-timing-properties-of-an-animation-effect">6.5. The AnimationEffect interface</a>
    <li><a href="#ref-for-update-the-timing-properties-of-an-animation-effect①">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-computedeffecttiming">
   <b><a href="#dictdef-computedeffecttiming">#dictdef-computedeffecttiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-computedeffecttiming">6.5. The AnimationEffect interface</a> <a href="#ref-for-dictdef-computedeffecttiming①">(2)</a>
    <li><a href="#ref-for-dictdef-computedeffecttiming②">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedeffecttiming-endtime">
   <b><a href="#dom-computedeffecttiming-endtime">#dom-computedeffecttiming-endtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedeffecttiming-endtime">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedeffecttiming-activeduration">
   <b><a href="#dom-computedeffecttiming-activeduration">#dom-computedeffecttiming-activeduration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedeffecttiming-activeduration">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedeffecttiming-localtime">
   <b><a href="#dom-computedeffecttiming-localtime">#dom-computedeffecttiming-localtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedeffecttiming-localtime">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedeffecttiming-progress">
   <b><a href="#dom-computedeffecttiming-progress">#dom-computedeffecttiming-progress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedeffecttiming-progress">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedeffecttiming-currentiteration">
   <b><a href="#dom-computedeffecttiming-currentiteration">#dom-computedeffecttiming-currentiteration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedeffecttiming-currentiteration">6.5.5. The ComputedEffectTiming dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="keyframeeffect">
   <b><a href="#keyframeeffect">#keyframeeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframeeffect">6.6. The KeyframeEffect interface</a> <a href="#ref-for-keyframeeffect①">(2)</a> <a href="#ref-for-keyframeeffect②">(3)</a> <a href="#ref-for-keyframeeffect③">(4)</a> <a href="#ref-for-keyframeeffect④">(5)</a> <a href="#ref-for-keyframeeffect⑤">(6)</a> <a href="#ref-for-keyframeeffect⑥">(7)</a> <a href="#ref-for-keyframeeffect⑦">(8)</a>
    <li><a href="#ref-for-keyframeeffect⑧">6.6.1. Creating a new KeyframeEffect object</a> <a href="#ref-for-keyframeeffect⑨">(2)</a> <a href="#ref-for-keyframeeffect①⓪">(3)</a>
    <li><a href="#ref-for-keyframeeffect①①">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-keyframeeffect①②">6.8. The Animatable interface mixin</a> <a href="#ref-for-keyframeeffect①③">(2)</a> <a href="#ref-for-keyframeeffect①④">(3)</a>
    <li><a href="#ref-for-keyframeeffect①⑤">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect">
   <b><a href="#dom-keyframeeffect-keyframeeffect">#dom-keyframeeffect-keyframeeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect">6.6. The KeyframeEffect interface</a> <a href="#ref-for-dom-keyframeeffect-keyframeeffect①">(2)</a>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect②">6.6.1. Creating a new KeyframeEffect object</a>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect③">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect④">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect⑤">6.8. The Animatable interface mixin</a> <a href="#ref-for-dom-keyframeeffect-keyframeeffect⑥">(2)</a> <a href="#ref-for-dom-keyframeeffect-keyframeeffect⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect-target-keyframes-options-target">
   <b><a href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target">#dom-keyframeeffect-keyframeeffect-target-keyframes-options-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-target">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes">
   <b><a href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes">#dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-keyframes">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect-target-keyframes-options-options">
   <b><a href="#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options">#dom-keyframeeffect-keyframeeffect-target-keyframes-options-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-target-keyframes-options-options">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect-source">
   <b><a href="#dom-keyframeeffect-keyframeeffect-source">#dom-keyframeeffect-keyframeeffect-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-source">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-keyframeeffect-source-source">
   <b><a href="#dom-keyframeeffect-keyframeeffect-source-source">#dom-keyframeeffect-keyframeeffect-source-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-source-source">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-target">
   <b><a href="#dom-keyframeeffect-target">#dom-keyframeeffect-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-target">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-pseudoelement">
   <b><a href="#dom-keyframeeffect-pseudoelement">#dom-keyframeeffect-pseudoelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-pseudoelement">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-composite">
   <b><a href="#dom-keyframeeffect-composite">#dom-keyframeeffect-composite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-composite">6.6. The KeyframeEffect interface</a> <a href="#ref-for-dom-keyframeeffect-composite①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-getkeyframes">
   <b><a href="#dom-keyframeeffect-getkeyframes">#dom-keyframeeffect-getkeyframes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-getkeyframes">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-dom-keyframeeffect-getkeyframes①">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-basecomputedkeyframe-offset">
   <b><a href="#dom-basecomputedkeyframe-offset">#dom-basecomputedkeyframe-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-basecomputedkeyframe-offset">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-basecomputedkeyframe-computedoffset">
   <b><a href="#dom-basecomputedkeyframe-computedoffset">#dom-basecomputedkeyframe-computedoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-basecomputedkeyframe-computedoffset">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-basecomputedkeyframe-easing">
   <b><a href="#dom-basecomputedkeyframe-easing">#dom-basecomputedkeyframe-easing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-basecomputedkeyframe-easing">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-basecomputedkeyframe-composite">
   <b><a href="#dom-basecomputedkeyframe-composite">#dom-basecomputedkeyframe-composite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-basecomputedkeyframe-composite">6.6. The KeyframeEffect interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-setkeyframes">
   <b><a href="#dom-keyframeeffect-setkeyframes">#dom-keyframeeffect-setkeyframes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-setkeyframes">6.6. The KeyframeEffect interface</a> <a href="#ref-for-dom-keyframeeffect-setkeyframes①">(2)</a>
    <li><a href="#ref-for-dom-keyframeeffect-setkeyframes②">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-property-name-to-idl-attribute-name">
   <b><a href="#animation-property-name-to-idl-attribute-name">#animation-property-name-to-idl-attribute-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-property-name-to-idl-attribute-name">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-animation-property-name-to-idl-attribute-name①">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="idl-attribute-name-to-animation-property-name">
   <b><a href="#idl-attribute-name-to-animation-property-name">#idl-attribute-name-to-animation-property-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-attribute-name-to-animation-property-name">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="check-the-completion-record">
   <b><a href="#check-the-completion-record">#check-the-completion-record</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-check-the-completion-record">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-check-the-completion-record①">(2)</a> <a href="#ref-for-check-the-completion-record②">(3)</a> <a href="#ref-for-check-the-completion-record③">(4)</a> <a href="#ref-for-check-the-completion-record④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="process-a-keyframe-like-object">
   <b><a href="#process-a-keyframe-like-object">#process-a-keyframe-like-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-process-a-keyframe-like-object">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-process-a-keyframe-like-object①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="process-a-keyframes-argument">
   <b><a href="#process-a-keyframes-argument">#process-a-keyframes-argument</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-process-a-keyframes-argument">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-process-a-keyframes-argument①">6.6.3. Processing a keyframes
argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-keyframeeffectoptions">
   <b><a href="#dictdef-keyframeeffectoptions">#dictdef-keyframeeffectoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions">6.6. The KeyframeEffect interface</a> <a href="#ref-for-dictdef-keyframeeffectoptions①">(2)</a> <a href="#ref-for-dictdef-keyframeeffectoptions②">(3)</a> <a href="#ref-for-dictdef-keyframeeffectoptions③">(4)</a>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions④">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions⑤">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions⑥">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffectoptions-composite">
   <b><a href="#dom-keyframeeffectoptions-composite">#dom-keyframeeffectoptions-composite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffectoptions-composite">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffectoptions-pseudoelement">
   <b><a href="#dom-keyframeeffectoptions-pseudoelement">#dom-keyframeeffectoptions-pseudoelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffectoptions-pseudoelement">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compositeoperation">
   <b><a href="#compositeoperation">#compositeoperation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compositeoperation">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-compositeoperation①">6.6.4. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-compositeoperation">
   <b><a href="#enumdef-compositeoperation">#enumdef-compositeoperation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-compositeoperation">6.6. The KeyframeEffect interface</a> <a href="#ref-for-enumdef-compositeoperation①">(2)</a>
    <li><a href="#ref-for-enumdef-compositeoperation②">6.6.4. The KeyframeEffectOptions dictionary</a> <a href="#ref-for-enumdef-compositeoperation③">(2)</a>
    <li><a href="#ref-for-enumdef-compositeoperation④">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-compositeoperation-replace">
   <b><a href="#dom-compositeoperation-replace">#dom-compositeoperation-replace</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-compositeoperation-replace">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-dom-compositeoperation-replace①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-compositeoperation-add">
   <b><a href="#dom-compositeoperation-add">#dom-compositeoperation-add</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-compositeoperation-add">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-dom-compositeoperation-add①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-compositeoperation-accumulate">
   <b><a href="#dom-compositeoperation-accumulate">#dom-compositeoperation-accumulate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-compositeoperation-accumulate">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-dom-compositeoperation-accumulate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-compositeoperationorauto">
   <b><a href="#enumdef-compositeoperationorauto">#enumdef-compositeoperationorauto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-compositeoperationorauto">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-enumdef-compositeoperationorauto①">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-enumdef-compositeoperationorauto②">(2)</a> <a href="#ref-for-enumdef-compositeoperationorauto③">(3)</a> <a href="#ref-for-enumdef-compositeoperationorauto④">(4)</a> <a href="#ref-for-enumdef-compositeoperationorauto⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-compositeoperationorauto-auto">
   <b><a href="#dom-compositeoperationorauto-auto">#dom-compositeoperationorauto-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-compositeoperationorauto-auto">6.6. The KeyframeEffect interface</a>
    <li><a href="#ref-for-dom-compositeoperationorauto-auto①">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-dom-compositeoperationorauto-auto②">(2)</a>
    <li><a href="#ref-for-dom-compositeoperationorauto-auto③">6.6.4. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-dom-compositeoperationorauto-auto④">6.7. The CompositeOperation and CompositeOperationOrAuto enumerations</a> <a href="#ref-for-dom-compositeoperationorauto-auto⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animatable">
   <b><a href="#animatable">#animatable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animatable">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-animatable①">(2)</a>
    <li><a href="#ref-for-animatable②">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-animatable③">6.11. Extensions to the Element interface</a>
    <li><a href="#ref-for-animatable④">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-keyframeanimationoptions">
   <b><a href="#dictdef-keyframeanimationoptions">#dictdef-keyframeanimationoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-keyframeanimationoptions">6.6.3. Processing a keyframes
argument</a>
    <li><a href="#ref-for-dictdef-keyframeanimationoptions①">6.8. The Animatable interface mixin</a> <a href="#ref-for-dictdef-keyframeanimationoptions②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-getanimationsoptions">
   <b><a href="#dictdef-getanimationsoptions">#dictdef-getanimationsoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-getanimationsoptions">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animatable-animate">
   <b><a href="#dom-animatable-animate">#dom-animatable-animate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animatable-animate">6.6.3. Processing a keyframes
argument</a> <a href="#ref-for-dom-animatable-animate①">(2)</a>
    <li><a href="#ref-for-dom-animatable-animate②">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-dom-animatable-animate③">6.13. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animatable-animate-keyframes-options-keyframes">
   <b><a href="#dom-animatable-animate-keyframes-options-keyframes">#dom-animatable-animate-keyframes-options-keyframes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animatable-animate-keyframes-options-keyframes">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animatable-animate-keyframes-options-options">
   <b><a href="#dom-animatable-animate-keyframes-options-options">#dom-animatable-animate-keyframes-options-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animatable-animate-keyframes-options-options">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animatable-getanimations">
   <b><a href="#dom-animatable-getanimations">#dom-animatable-getanimations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animatable-getanimations">6.8. The Animatable interface mixin</a> <a href="#ref-for-dom-animatable-getanimations①">(2)</a> <a href="#ref-for-dom-animatable-getanimations②">(3)</a>
    <li><a href="#ref-for-dom-animatable-getanimations③">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="relevant-animation">
   <b><a href="#relevant-animation">#relevant-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relevant-animation">6.8. The Animatable interface mixin</a>
    <li><a href="#ref-for-relevant-animation①">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animatable-getanimations-options-options">
   <b><a href="#dom-animatable-getanimations-options-options">#dom-animatable-getanimations-options-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animatable-getanimations-options-options">6.8. The Animatable interface mixin</a> <a href="#ref-for-dom-animatable-getanimations-options-options①">(2)</a>
    <li><a href="#ref-for-dom-animatable-getanimations-options-options②">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeanimationoptions-id">
   <b><a href="#dom-keyframeanimationoptions-id">#dom-keyframeanimationoptions-id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeanimationoptions-id">6.8. The Animatable interface mixin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-getanimationsoptions-subtree">
   <b><a href="#dom-getanimationsoptions-subtree">#dom-getanimationsoptions-subtree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-getanimationsoptions-subtree">6.8. The Animatable interface mixin</a> <a href="#ref-for-dom-getanimationsoptions-subtree①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-timeline">
   <b><a href="#dom-document-timeline">#dom-document-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-timeline">6.9. Extensions to the Document interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-documentorshadowroot-getanimations">
   <b><a href="#dom-documentorshadowroot-getanimations">#dom-documentorshadowroot-getanimations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-documentorshadowroot-getanimations">6.10. Extensions to the DocumentOrShadowRoot interface mixin</a>
    <li><a href="#ref-for-dom-documentorshadowroot-getanimations①">11. Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationplaybackevent">
   <b><a href="#animationplaybackevent">#animationplaybackevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationplaybackevent">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-animationplaybackevent①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-animationplaybackevent②">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-animationplaybackevent③">6.12. The AnimationPlaybackEvent interface</a> <a href="#ref-for-animationplaybackevent④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-animationplaybackeventinit">
   <b><a href="#dictdef-animationplaybackeventinit">#dictdef-animationplaybackeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-animationplaybackeventinit">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationplaybackevent-animationplaybackevent">
   <b><a href="#dom-animationplaybackevent-animationplaybackevent">#dom-animationplaybackevent-animationplaybackevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationplaybackevent-animationplaybackevent">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationplaybackevent-currenttime">
   <b><a href="#dom-animationplaybackevent-currenttime">#dom-animationplaybackevent-currenttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationplaybackevent-currenttime">4.4.13. Updating the finished state</a>
    <li><a href="#ref-for-dom-animationplaybackevent-currenttime①">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-dom-animationplaybackevent-currenttime②">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-dom-animationplaybackevent-currenttime③">6.12. The AnimationPlaybackEvent interface</a> <a href="#ref-for-dom-animationplaybackevent-currenttime④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationplaybackevent-timelinetime">
   <b><a href="#dom-animationplaybackevent-timelinetime">#dom-animationplaybackevent-timelinetime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationplaybackevent-timelinetime">4.4.13. Updating the finished state</a> <a href="#ref-for-dom-animationplaybackevent-timelinetime①">(2)</a>
    <li><a href="#ref-for-dom-animationplaybackevent-timelinetime②">4.4.15. Canceling an animation</a>
    <li><a href="#ref-for-dom-animationplaybackevent-timelinetime③">5.5.2. Removing replaced animations</a>
    <li><a href="#ref-for-dom-animationplaybackevent-timelinetime④">6.12. The AnimationPlaybackEvent interface</a> <a href="#ref-for-dom-animationplaybackevent-timelinetime⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationplaybackeventinit-currenttime">
   <b><a href="#dom-animationplaybackeventinit-currenttime">#dom-animationplaybackeventinit-currenttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationplaybackeventinit-currenttime">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationplaybackeventinit-timelinetime">
   <b><a href="#dom-animationplaybackeventinit-timelinetime">#dom-animationplaybackeventinit-timelinetime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationplaybackeventinit-timelinetime">6.12. The AnimationPlaybackEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="combining-shadow-lists">
   <b><a href="#combining-shadow-lists">#combining-shadow-lists</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-combining-shadow-lists">Animation of box-shadow</a> <a href="#ref-for-combining-shadow-lists①">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>